更新多个圆环图的大小和值 d3.js

Question

我正在使用 JS 和 d3.js 3.x.

进行项目

我有一个强制布局，其中每个节点都被圆环图包围。

现在我正在尝试通过过渡更新数据并调整节点和圆环图的大小，但我在使用 arcTween 函数时遇到了很大的麻烦。

如果我创建不依赖于数据的 arc 变量，arcTween 函数会做它应该做的事情，但如果我像这样设置外半径和内半径，它就不会：

    var arc = d3.svg.arc()
    .innerRadius(function(d){
        if(d.data.group==1)
            return radiusScale(d.data.value);
    })
    .outerRadius(function(d){
        if(d.data.group==1)
            return radiusScale(d.data.value)+10;
    })
    .cornerRadius(11);

我尝试了很多解决方案，但其中 none 行得通。

这里是 Fiddle 的完整代码： https://jsfiddle.net/56n4fhLg/1/

谢谢

Answer 1

我找到问题了，我忘了为每个路径Pie保存"d"：

    pathPie
    .attr("id", function(d,i) { return "arc_"+d.data.target; })
    .attr("d", function(d, i) {
            var temp = radiusScale(d.data.value);
            arc.innerRadius(temp)(d, i);
            temp += 10;
            return arc.outerRadius(temp)(d, i);
    })
    .each(function(d) {
        this._current = d;
    });

这里更新了代码：https://jsbin.com/yosesotuwo/edit?output

更新多个圆环图的大小和值 d3.js

Update size and value of multiple donut charts d3.js

javascript

d3.js

data-visualization

donut-chart