D3js:饼图中的水平线工作,但不理解代码

时间:2014-07-03 22:40:34

标签: javascript d3.js charts pie-chart

我喜欢this饼图。它将行切成文本标签。这些标签以线条完全水平的方式放置。虽然代码在那里的页面上,但我不明白这是怎么做的。

猜猜是这部分:

function midAngle(d){
    return d.startAngle + (d.endAngle - d.startAngle)/2;
}
text.transition().duration(1000)
    .attrTween("transform", function(d) {
        this._current = this._current || d;
        var interpolate = d3.interpolate(this._current, d);
        this._current = interpolate(0);
        return function(t) {
            var d2 = interpolate(t);
            var pos = outerArc.centroid(d2);
            pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
            return "translate("+ pos +")";
        };
    })

试图阅读文档并获得start / endangle的概念,但失败了。

我正在玩一个可以处理标签折叠的饼图(http://jsfiddle.net/8QvvF/后阅读this)并希望能够将其变成带有水平线退出弧线的图表正好位于中间

任何人都可以告诉我这段代码的作用或者给我一个如何修改我的小提琴的提示吗?

enter image description here enter image description here

0 个答案:

没有答案