in src/radarChart.ts [921:1070]
private drawChart(series: RadarChartSeries[], duration: number): void {
let angle: number = this.angle;
let layers: RadarChartDatapoint[][] = this.getDataPoints(series);
let yDomain: ScaleLinear<number, number> = this.calculateChartDomain(series);
let axisBeginning: number = this.radarChartData.settings.displaySettings.axisBeginning;
let calculatePoints = (points) => {
return points.map((value) => {
if (value.showPoint) {
let x1: number = yDomain(value.y) * Math.sin(value.x * angle),
y1: number = axisBeginning * yDomain(value.y) * Math.cos(value.x * angle);
return `${x1},${y1}`;
}
}).join(" ");
};
let areasSelection: d3.Selection<d3.BaseType, RadarChartDatapoint[], any, any> = this.chart
.selectAll(RadarChart.ChartAreaSelector.selectorName)
.data(layers);
areasSelection
.exit()
.remove();
areasSelection = areasSelection
.enter()
.append("g")
.classed(RadarChart.ChartAreaSelector.className, true)
.merge(areasSelection);
let polygonSelection: d3.Selection<d3.BaseType, RadarChartDatapoint[], any, any> = areasSelection
.selectAll(RadarChart.ChartPolygonSelector.selectorName)
.data((dataPoints: RadarChartDatapoint[]) => {
if (dataPoints && dataPoints.length > 0) {
let points: RadarChartDatapoint[] = [];
dataPoints.forEach((point) => {
if (point.showPoint) {
points.push(point);
}
});
return [points];
}
return [];
});
polygonSelection
.exit()
.remove();
polygonSelection = polygonSelection
.enter()
.append("polygon")
.classed(RadarChart.ChartPolygonSelector.className, true)
.merge(polygonSelection)
.style("opacity", RadarChartUtils.DimmedOpacity)
.on("mouseover", function () {
d3.select(this)
.transition()
.duration(duration)
.style("opacity", RadarChart.AreaFillOpacity);
})
.on("mouseout", function () {
d3.select(this)
.transition()
.duration(duration)
.style("opacity", RadarChartUtils.DimmedOpacity);
})
.attr("points", calculatePoints)
.attr("points-count", (dataPoints: RadarChartDatapoint[]) => dataPoints.length);
let settings: RadarChartSettings = this.radarChartData.settings;
if (settings.line.show ||
polygonSelection.attr("points-count") === RadarChart.PoligonBecomesLinePointsCount.toString()
) {
polygonSelection
.style("fill", "none")
.style("stroke", (dataPoints: RadarChartDatapoint[]) =>
dataPoints.length ? this.colorHelper.getHighContrastColor("foreground", dataPoints[0].color) : null)
.style("stroke-width", settings.line.lineWidth);
} else {
polygonSelection
.style("fill", (dataPoints: RadarChartDatapoint[]) => dataPoints.length ? this.colorHelper.getHighContrastColor("foreground", dataPoints[0].color) : null)
.style("stroke-width", RadarChart.PolygonStrokeWidth);
}
let nodeSelection: d3.Selection<d3.BaseType, RadarChartDatapoint[], any, any> = this.chart
.selectAll(RadarChart.ChartNodeSelector.selectorName)
.data(layers);
nodeSelection
.exit()
.remove();
nodeSelection = nodeSelection
.enter()
.append("g")
.classed(RadarChart.ChartNodeSelector.className, true)
.merge(nodeSelection);
let hasHighlights: boolean = (series.length > 0) && series[0].hasHighlights,
hasSelection: boolean = this.interactivityService && this.interactivityService.hasSelection();
let dotsSelection: d3.Selection<d3.BaseType, RadarChartDatapoint, any, any> = nodeSelection
.selectAll(RadarChart.ChartDotSelector.selectorName)
.data((dataPoints: RadarChartDatapoint[]) => {
return dataPoints.filter(d => d.y != null && d.showPoint);
});
dotsSelection
.exit()
.remove();
dotsSelection = dotsSelection
.enter()
.append("svg:circle")
.classed(RadarChart.ChartDotSelector.className, true)
.merge(dotsSelection).attr("r", RadarChart.DotRadius)
.attr("cx", (dataPoint: RadarChartDatapoint) => yDomain(dataPoint.y) * Math.sin(dataPoint.x * angle))
.attr("cy", (dataPoint: RadarChartDatapoint) => axisBeginning * yDomain(dataPoint.y) * Math.cos(dataPoint.x * angle))
.style("fill", (dataPoint: RadarChartDatapoint) => this.colorHelper.getHighContrastColor("foreground", dataPoint.color))
.style("opacity", (dataPoint: RadarChartDatapoint) => {
return RadarChartUtils.getFillOpacity(
dataPoint.selected,
dataPoint.highlight,
!dataPoint.highlight && hasSelection,
!dataPoint.selected && hasHighlights);
});
this.tooltipServiceWrapper.addTooltip(
dotsSelection,
(eventArgs: TooltipEventArgs<RadarChartDatapoint>) => {
return eventArgs.data.tooltipInfo;
},
null,
true);
if (this.interactivityService) {
// Register interactivity
let dataPointsToBind: RadarChartDatapoint[] = this.getAllDataPointsList(series),
behaviorOptions: RadarChartBehaviorOptions;
behaviorOptions = {
selection: dotsSelection,
clearCatcher: this.svg,
hasHighlights: hasHighlights
};
this.interactivityService.bind(dataPointsToBind, this.behavior, behaviorOptions);
}
}