Radial Chart - Works but Appends Multiple Paths

compare to Lars

by Nivaldo

HTML

<button id="refresh">REFRESH</button>
<div id="container"></div>

CSS

body {
    background-color: #EEE;
}
circle.background {
    stroke: #CCC;
    fill: #FFF;
    stroke-width: 2;
}
.axis path {
    fill: none;
    stroke: #CCC;
    stroke-width: 2;
}
.axisScale text {
    display: none;
}
.radar path {
    stroke-width: 2;
    fill-opacity: 0.6;
}
.radar0 {
    stroke: #F33;
    fill: #F33;
}
.radar1 {
    stroke: #33F;
    fill: #33F;
}
.axisLabel {
    font: 10px sans-serif;
    text-transform: capitalize;
    fill: #333;
    stroke: none;
}
#container {
    width: 320px;
}

JavaScript

function radar(metricConfiguration) {

    'use strict';

    var metrics = metricConfiguration,
        margin = 0,
        radius = 150,
        pointRadius = 3,
        labelOffset = radius + 10,
        maxLimit = 6.0,
        animSpeed = 300;

    function chart(selection) {

        var side = (radius + margin) * 2,
            pointCount = 0;

        selection.each(function (data) {

            // Compute configuration
            metrics = metrics.map(function (metric, i) {

                metric.scale = d3.scale.linear()
                    .range([0, radius])
                    .domain(metric.domain);

                metric.angle = 2 * Math.PI * i / metrics.length - Math.PI / 2;

                return metric;
            });

            // Augment data
            data = data.map(function (d) {

                d.points = metrics.map(function (metric) {

                    var origX = metric.scale(d.rate[metric.metric]);

                    return {
                        'x': origX * Math.cos(metric.angle),
                            'y': origX * Math.sin(metric.angle),
                            'label': d.rate[metric.metric] + '/' + metric.domain[1],
                            'id': pointCount++
                    };

                });

                return d;

            });

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll('svg').data([metrics]);
            
            // --> svg exit selection
            svg.exit().remove();
            
            // --> svg enter selection
            svg.enter().append('svg');

            // create the skeletal chart.
            var svgAppend = svg
                //.append('svg')
                .append('g')
                .attr('transform', 'translate(' + (side / 2) + ', ' + (side / 2) + ')'); //center chart

            // Update the outer dimensions.
            svg.attr('width', side)
                .attr('height', side);

     ...