private drawChart()

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