in src/visual.ts [1530:1592]
private drawDots(data: ChartData): void {
if (!data || !data.xScale) {
return;
}
let xScale: LinearScale = <LinearScale>data.xScale,
yScales: LinearScale[] = <LinearScale[]>data.yScales,
node: ClassAndSelector = Visual.Dot,
nodeParent: ClassAndSelector = Visual.DotsContainer,
rootSelection: Selection<any> = this.rootSelection,
dotColor: string = this.data.settings.dots.color,
dotSize: number = this.data.settings.dots.size,
isAnimated: boolean = this.animationHandler.isAnimated,
position: AnimationPosition = this.animationHandler.position,
hasSelection: boolean = this.interactivityService.hasSelection(),
hasHighlights: boolean = this.data.hasHighlights;
let selection: Selection<any> = rootSelection.filter((d, index) => !isAnimated || index <= position.series)
.select(nodeParent.selectorName)
.selectAll(node.selectorName)
.data((d: Series, seriesIndex: number) => {
return filter(d.data, (value: DataPoint, valueIndex: number): boolean => {
if (isAnimated && (seriesIndex === position.series) && (valueIndex > position.index)) {
return false;
}
return (!!value.popupInfo);
});
});
let selectionMerged = selection
.enter()
.append("circle")
.merge(selection);
selectionMerged.classed(node.className, true);
selectionMerged
.attr("cx", (d: DataPoint) => xScale(d.categoryValue))
.attr("cy", (d: DataPoint) => yScales[d.groupIndex](d.y))
.attr("r", (d: DataPoint) => d.eventSize || dotSize)
.style("fill", dotColor)
.style("opacity", (d: DataPoint) => {
let isSelected: boolean = pulseChartUtils.getFillOpacity(d.selected, d.highlight, !d.highlight && hasSelection, !d.selected && hasHighlights) === 1;
return isSelected ? this.dotOpacity : this.dotOpacity / 2;
})
.style("cursor", "pointer");
selection
.exit()
.remove();
if (this.interactivityService) {
let behaviorOptions: BehaviorOptions = {
behavior: this.behavior,
dataPoints: this.data.dots,
selection: selectionMerged,
clearCatcher: this.svg,
interactivityService: this.interactivityService,
hasHighlights: this.data.hasHighlights,
onSelectCallback: () => this.renderChart(),
};
this.interactivityService.bind(behaviorOptions);
}
}