private drawDots()

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);
        }
    }