Tween Arc outerRadius（）

Question

在下面的代码中，当您单击圆弧时，它会补间该圆的特定圆弧的外半径。

var data = {
    "details": [
        { "id": 1, "name": "AAA", "pcArray": [25,75], "type": "c", "subtype": "p", },
        { "id": 2, "name": "BBB", "pcArray": [25,175], "type": "c", "subtype": "r", },
        { "id": 3, "name": "CCC", "pcArray": [5,95], "type": "e", "subtype": "p", },
        { "id": 4, "name": "DDD", "pcArray": [10,30], "type": "e", "subtype": "r", },
        { "id": 5, "name": "EEE", "pcArray": [0,30], "type": "c", "subtype": "r", },
    ],
};

var radius = 70, margin = 50,
        width = 2 * radius + margin,
        height = data.details.length * (2 * radius + margin) + margin;

var arc = d3.svg.arc()
    .outerRadius(radius - 5)
    .innerRadius(radius / 2);

var arcLarge = d3.svg.arc()
    .outerRadius(radius + margin/2 - 5)
    .innerRadius(radius / 2);

var pie = d3.layout.pie();

var svg = d3.select("body")
    .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("background", "lightgray")
        .style("border", "3px solid #eee")
    .append("g");

var arcs = svg.selectAll("g.slice")
    .data(data.details)
    .enter().append("g")
        .attr("transform", function (d, i) { return "translate(" + (radius + 25) + "," + (i * (2 * radius + margin) + radius + margin) + ")"; })
        .attr("class", "slice");

var toggleArc = function(p){
    p.state = !p.state;
    var dest = p.state ? arcLarge : arc;

    d3.select(this).select("path").transition()
      .duration(1000)
      .attr("d", dest);
};

var arcs_path = arcs.selectAll("g.slice")
    .data(function (d) { return pie(d.pcArray); })
    .enter().append("g")
    .on( "click", toggleArc );

arcs_path.append("path")
    .attr("d", arc)
    .style("fill", function(g, i) {
      if (!i) return "white";
      var d = d3.select(this.parentNode.parentNode).datum(),
          colorList = d3.scale.category10().range();

      if (d.type === "c") {
        if (d.subtype === "p") return colorList[0];
        if (d.subtype === "r") return colorList[1];
      }
      else if (d.type === "e") {
        if (d.subtype === "p") return colorList[2];
        if (d.subtype === "r") return colorList[3];
      }        
    });

如何修改此代码，以便无论我在哪个点击特定圆圈，所有圆弧都会在其外半径之间补间？

这是小提琴：http://jsfiddle.net/kcd8yfa2/

Answer 1

不是仅仅为正在点击的弧调用.Where(p => p.Name == name)，而是为所有这些调用它：

toggleArc

完整示例here。

如果要仅为要点击的特定饼图突出显示所有弧，请仅选择.on( "click", function() { arcs_path.each(toggleArc); } ); 元素：

g

完整示例here。