in src/visual.ts [612:682]
private draw(): void {
this.stopAnimation();
this.renderLegends();
this.drawPlaybackButtons();
if (this.settings.xAxis.show === true) {
this.axisX.call(this.xAxisProperties.axis);
} else {
this.clearElement(this.axisX);
}
if (this.settings.yAxis.show === true) {
this.axisY.call(this.yAxisProperties.axis);
if (this.settings.yAxis.isDuplicated) {
const scale: any = this.yAxis2Properties.scale;
const ticksCount: number = this.yAxis2Properties.values.length;
const format: any = (domainValue: d3.AxisDomain, value: any) => this.yAxis2Properties.values[value];
let axis = d3.axisRight(scale);
this.axisY2.call(axis.tickArguments([ticksCount]).tickFormat(format));
} else {
this.clearElement(this.axisY2);
}
} else {
this.clearElement(this.axisY);
this.clearElement(this.axisY2);
}
this.axisX.selectAll(LineDotChart.tickText).call(
AxisHelper.LabelLayoutStrategy.clip,
this.xAxisProperties.xLabelMaxWidth,
TextMeasurementService.svgEllipsis
);
if (this.settings.misc.isAnimated && this.settings.misc.isStopped) {
this.main
.selectAll(LineDotChart.Line.selectorName)
.selectAll(LineDotChart.dotPointsText)
.remove();
this.line
.selectAll(LineDotChart.textSelector)
.remove();
return;
}
this.applyAxisSettings();
let linePathSelection: d3.Selection<d3.BaseType, LineDotPoint[], any, any> = this.line
.selectAll(LineDotChart.dotPathText)
.data([this.data.dotPoints]);
linePathSelection
.exit()
.remove();
const lineTipSelection: d3.Selection<d3.BaseType, LineDotPoint[], any, any> = this.line
.selectAll("g." + LineDotChart.dotPointsClass)
.data([this.data.dotPoints]);
lineTipSelection
.exit()
.remove();
let linePathSelectionMerged = this.drawLine(linePathSelection);
this.drawClipPath(linePathSelectionMerged);
this.drawDots(lineTipSelection);
}