private drawScatterMarkersUsingShapes()

in src/EnhancedScatterChart.ts [2661:2739]


    private drawScatterMarkersUsingShapes(
        markers: Selection<EnhancedScatterChartDataPoint>,
        markersMerged: Selection<EnhancedScatterChartDataPoint>,
        scatterData: EnhancedScatterChartDataPoint[],
        sizeRange: NumberRange,
        duration: number
    ): {
            markers: Selection<EnhancedScatterChartDataPoint>,
            markersMerged: Selection<EnhancedScatterChartDataPoint>
        } {
        this.mainGraphicsContext
            .selectAll(EnhancedScatterChart.DotSelector.selectorName)
            .remove();

        markers = this.mainGraphicsContext
            .classed(EnhancedScatterChart.ScatterMarkersSelector.className, true)
            .selectAll(EnhancedScatterChart.ImageSelector.selectorName)
            .data(scatterData, (dataPoint: EnhancedScatterChartDataPoint) => {
                return (<ISelectionId>dataPoint.identity).getKey();
            });

        markersMerged = markers
            .enter()
            .append("svg:image")
            .merge(markers);

        markersMerged
            .classed(EnhancedScatterChart.ImageSelector.className, true)
            .attr("id", EnhancedScatterChart.MarkerImageSelector.className);

        const thisVisual = this;
        markersMerged
            .attr("xlink:href", (dataPoint: EnhancedScatterChartDataPoint) => {
                if (dataPoint.svgurl !== undefined
                    && dataPoint.svgurl != null
                    && dataPoint.svgurl !== "") {

                    return dataPoint.svgurl;
                }

                return this.svgDefaultImage;
            })
            .attr("title", (dataPoint: EnhancedScatterChartDataPoint) => {
                return dataPoint.formattedCategory
                    ? dataPoint.formattedCategory()
                    : null;
            })
            .each(function (dataPoint: EnhancedScatterChartDataPoint): void {
                const bubbleRadius: number = EnhancedScatterChart.getBubbleRadius(
                    dataPoint.radius,
                    sizeRange,
                    thisVisual.viewport) * EnhancedScatterChart.BubbleRadiusDivider;

                d3.select(this)
                    .attr("width", bubbleRadius)
                    .attr("height", bubbleRadius);
            })
            .transition()
            .duration((dataPoint: EnhancedScatterChartDataPoint) => {
                if (this.keyArray.indexOf((<ISelectionId>dataPoint.identity).getKey()) >= 0) {
                    return duration;
                }

                return EnhancedScatterChart.MinAnimationDuration;
            })
            .attr("transform", (dataPoint: EnhancedScatterChartDataPoint) => {
                const radius: number = EnhancedScatterChart.getBubbleRadius(
                    dataPoint.radius,
                    sizeRange,
                    this.viewport);

                const x: number = EnhancedScatterChart.getDefinedNumberValue(this.xAxisProperties.scale(dataPoint.x) - radius),
                    y: number = EnhancedScatterChart.getDefinedNumberValue(this.yAxisProperties.scale(dataPoint.y) - radius);

                return `translate(${x},${y}) rotate(${dataPoint.rotation},${radius},${radius})`;
            });

        return { markers, markersMerged };
    }