libs/d3/src/lib/helper/d3-graph-helper.service.ts
Methods |
|
constructor()
|
Public drawDatasetSign | ||||||||||||||||||||||||
drawDatasetSign(svgElem: d3.Selection
|
||||||||||||||||||||||||
Draws a datasetoptions based designed sign
Parameters :
Returns :
void
|
Public getDimensions | ||||||||
getDimensions(el: any)
|
||||||||
Function that returns the boundings of a html element.
Parameters :
Returns :
literal type
|
import { Injectable } from '@angular/core';
import { DatasetOptions } from '@helgoland/core';
@Injectable({
providedIn: 'root'
})
export class D3GraphHelperService {
constructor() { }
/**
* Function that returns the boundings of a html element.
* @param el {Object} Object of the html element.
*/
public getDimensions(el: any): { w: number, h: number } {
let w = 0;
let h = 0;
if (el) {
const dimensions = el.getBBox();
w = dimensions.width;
h = dimensions.height;
} else {
console.log('error: getDimensions() ' + el + ' not found.');
}
return {
w,
h
};
}
/**
* Draws a datasetoptions based designed sign
*
* @param svgElem - SVG Element, where the dataset sign will be appended
* @param options - used for the styling parameters (color, size)
* @param xPos - relative x position
* @param yPos - relative y position
* @param selected - if selected the sign will be drawn bigger
*/
public drawDatasetSign(svgElem: d3.Selection<SVGSVGElement, any, any, any>, options: DatasetOptions, xPos: number, yPos: number, selected: boolean) {
if (options.lineWidth > 0) {
const lineLength = 4;
svgElem.append('line')
.attr('class', 'y-axis-line')
.attr('id', 'axisdot-line-' + options.internalId)
.attr('stroke', options.color)
.attr('fill', options.color)
.attr('x1', xPos - lineLength * 2)
.attr('y1', yPos)
.attr('x2', xPos + lineLength * 2)
.attr('y2', yPos)
.attr('stroke-width', options.lineWidth + (selected ? 2 : 0));
}
if (options.pointRadius > 0) {
svgElem.append('circle')
.attr('class', 'y-axis-circle')
.attr('id', 'axisdot-circle-' + options.internalId)
.attr('stroke', options.color)
.attr('fill', options.color)
.attr('cx', xPos)
.attr('cy', yPos)
.attr('r', options.pointRadius + (selected ? 2 : 0));
}
}
}