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

Question

i'm working on a project using JS and d3.js 3.x.

I've a force layout where every node is sorrounded by a donut chart.

Now I'm trying to update the data and resize nodes and donut charts with a transition but I'm having big troubles with the arcTween function.

If I create arc variable not depending by data, the arcTween function does what it should do but it does not if I set outer and inner radius like this:

    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);

I've tried many solutions but none of them works.

Here the Fiddle with the full code: https://jsfiddle.net/56n4fhLg/1/

Thanks

Answer 1

I've found the problem, I forgot to save the "d" for each pathPie:

    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;
    });

Here the code updated: https://jsbin.com/yosesotuwo/edit?output