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