Javascript 外弧间（）

在下面的代码中，当您单击一个圆的圆弧时，它将在该圆的特定圆弧的外半径之间

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

如何修改此代码，使一个圆的所有圆弧在其外半径之间，而不管我单击该特定圆的何处

---

这里是fiddle:

不要只为单击的弧调用

toggleArc

，而是为所有弧调用它：

.on( "click", function() { arcs_path.each(toggleArc); } );

完整的例子

如果要仅为单击的特定饼图高亮显示所有圆弧，请仅选择以下元素的

g

元素：

.on( "click", function() { d3.select(this.parentNode).selectAll("g").each(toggleArc); } );

---

完整示例。

不适用于数据中的所有圆弧。就为了点击的那个。啊，好吧，我不清楚——我已经更新了答案。