javascript - d3.js同心环图

我正在寻找开发一个圆环图。每个新数据集在另一个内部都显示为同心环。

http://jsfiddle.net/NYEaX/101/

我尝试对数据中的值求和，并用它来帮助开发比例算法，以确保每条弧线都不会超过一个循环。

这部分管理同心环。

getArc: function(){
            var that = this;

            var radiusArray = [100, 80];

            function getRadiusRing(i){
                return that.radius-(i*20);
            }
            var thickness = 15;

            var arc = d3.svg.arc()
                    .innerRadius(function(d){
                        return getRadiusRing(d.index);
                    })
                    .outerRadius(function(d){
                        return getRadiusRing(d.index)+thickness;
                    })
                    .startAngle(function(d, i){
                        return d.startAngle;
                    })
                    .endAngle(function(d, i){
                        return d.endAngle;
                    });
            return arc;
        }

但我认为端角计算存在缺陷。如果您启用更多数据-尽管同心环正确形成，但它们在整个图表中的可疑弧长却缠绕在整个图表上？

setData: function(data){
            var diameter = 2 * Math.PI * this.radius;
            var localData = new Array();

            var segmentValueSum = 0;
            $.each(data[0].segments, function( ri, va) {
                segmentValueSum+= va.value;
            });

            $.each(data[0].segments, function(ri, value) {

                var segmentValue = value.value;

                var fraction = segmentValue/segmentValueSum;

                var arcBatchLength = fraction*2*Math.PI;
                var arcPartition = arcBatchLength;

                var startAngle = 0;
                var endAngle = ((ri+1)*arcPartition);

                data[0].segments[ri]["startAngle"] = startAngle;
                data[0].segments[ri]["endAngle"] = endAngle;
                data[0].segments[ri]["index"] = ri;
            });

            localData.push(data[0].segments);

            return localData[0];
        }

试图建立图表如下所示



我已经增强了图表，但在图例，圆环和值的放置和更新方面仍然存在问题。为什么保留旧数据？
http://jsfiddle.net/NYEaX/123/

如果有更多或更少的数据-标签放置不正确

 //draw labels
            valueLabels = value_group.selectAll("text.value").data(reversedata)
            valueLabels.enter().append("svg:text")
            .attr("class", "value")
            .attr("transform", function(d) {
                var rings = counts;

                return "translate("+(that.radius+55)/rings+", 0)";
            })
             .attr("dx", function(d, i){
                return 19*i;            })
            .attr("dy", function(d, i){
                return -5;
            })
            .attr("text-anchor", function(d){
                return "start";
            }).text(function(d){
                return d.value;
            });

            valueLabels.transition().duration(300).attrTween("d", arcTween)
            valueLabels.exit().remove();

最佳答案

更换

    var endAngle = ((ri+1)*arcPartition);

通过

    var endAngle = startAngle + arcPartition;