弧形图 - 具有各种段压痕/高度

Question

最新的ARC CHART 1 - http://jsfiddle.net/NYEaX/699/ ***

我正在开发一套弧形图表。

http://jsfiddle.net/NYEaX/90/

^这是我的最新版本。

我的第一个问题 - 当一组新数据进入时 - 动画显示为闪烁。

我也有兴趣改变每段的内半径/外半径。

我是否只需在以下代码中为i提供模数

getArc: function(){
            var that = this;

            var arc = d3.svg.arc()
                    .innerRadius(function(d, i){
                        return that.radius;
                    })
                    .outerRadius(function(d){
                        var maxHeight = 100;
                        var ratio = (d.height/maxHeight * 100)+that.radius;
                        return ratio;
                    })
                    .startAngle(function(d, i){
                        return d.startAngle;
                    })
                    .endAngle(function(d, i){
                        return d.endAngle;
                    });

            return arc;
        }

---

我已经更正了申请。

我已经成功地在各个细分市场上创造了一个转变。

http://jsfiddle.net/NYEaX/91/

但是，我现在尝试使用段的值来改变它们的长度。所以我想创建一个看起来像图片示例的弧。

这是我得到的最新例子。

http://jsfiddle.net/NYEaX/92/

这是代码 - 我不确定如何通过startAngle / endAngle获得所有弧的总长度以提供正确的长度来完成解决方案。

setData: function(data, isSorted){

            var diameter = 2 * Math.PI * this.radius;

            var localData = new Array();

            var displacement = 0;
            var oldBatchLength = 0;


            var totalSum = 0;
            $.each(data, function(index, value) {
                $.each(value.segments, function( ri, va) {
                    totalSum+= va.height;
                });
            });


            $.each(data, function(index, value) {               
                var riseLevels = value.segments;
                //var riseLevelCount = riseLevels.length;

                //var arcBatchLength = 2*Math.PI;
                //var arcPartition = arcBatchLength/riseLevelCount;

                    $.each(riseLevels, function( ri, value ) {

                        if(oldBatchLength !=undefined){             
                            displacement+=oldBatchLength;
                        }

                        var segmentValue = value.height;

                        //var ratio = value.height/totalSum;

                        var arcBatchLength = segmentValue;//ratio*2*Math.PI;
                        var arcPartition = arcBatchLength/totalSum;                     


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

                        if(index!=0){
                            startAngle+=displacement;
                            endAngle+=displacement;
                        }

                        riseLevels[ri]["startAngle"] = startAngle;
                        riseLevels[ri]["endAngle"] = endAngle;
                        riseLevels[ri]["index"] = ri;   



                        oldBatchLength = arcBatchLength;
                    });
                        //oldBatchLength = arcBatchLength;      

                localData.push(riseLevels);
            });

            var finalArray = new Array();

            $.each(localData, function(index, value) {
                $.each(localData[index], function(i, v) {
                    finalArray.push(v);
                });
            });

            console.log("finalArray", finalArray);

            return finalArray;

        }

Answer 1

我已经接近修复弧长以参考它们的值。但是弧线的位移是不正确的。

http://jsfiddle.net/NYEaX/100/

如果灰色弧线中有更多数据暴露 - 它会中断。如果切换到绿色/黄色/绿色弧线，则类似。

我试图进一步简化应用程序以尝试识别问题。

$.each(data[0].segments, function(ri, value) {
                //console.log("ri", ri);

                if(oldBatchLength !=undefined){             
                    displacement+=oldBatchLength;
                }

                var segmentValue = value.value;

                var fraction = segmentValue/segmentValueSum;

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

                //console.log("arcBatchLength", arcBatchLength);
                //console.log("oldBatchLength", oldBatchLength);
                //console.log("displacement", displacement);

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

                if(ri!=0){
                    displacement-=arcBatchLength;//not sure its right

                    startAngle+=displacement;
                    endAngle+=displacement;
                }

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

                oldBatchLength = arcBatchLength;
            });