更新多个甜甜圈图d3.js的大小和值

Question

我正在使用JS和d3.js 3.x进行项目。

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

现在，我试图通过过渡来更新数据并调整节点和甜甜圈图的大小，但是在使用arcTween函数时遇到了很多麻烦。

如果创建不依赖数据的弧形变量，则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);

我已经尝试了许多解决方案，但没有一个可行。

这里是带有完整代码的小提琴： https : //jsfiddle.net/56n4fhLg/1/

谢谢

Answer 1

我发现了问题，我忘了为每个pathPie保存“ 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