Question

我正在用d3制作饼图。图的每一部分都有内部路径和外部路径。这样，当两组路径都需要转换时，它们都基于相同的数据集。

所以我的想法是将数据绑定到一组'g'（带有类'.piece'），然后让两个路径集（'.innerpath'和'.outerpath'）都有数据指向他们的父数据集。

我该怎么做？

pieces = container.selectAll('.piece')
    .data(pie(data))
    .enter().append('g')
    .each(function(d) { this._current = d; }); // store the initial angles

outerPaths = pieces.append('path')
    .data(function(){
    // ??
    }).attr('d', outerArc)
    .attr('class', 'outerpath');

Answer 1

到路径添加组。

  var path = svg.datum(data).selectAll("path")
      .data(pie)
    .enter().append("g");

向组添加外弧的路径。

path.append("path")
  .attr("fill", function(d, i) { return color(i); })
  .classed("outer", true)//add class outer
  .attr("d", arco)
  .each(function(d) { this._current = d; })

向组添加带内弧的路径。

path.append("path")
  .attr("fill", function(d, i) { return color(i + 1); })
  .classed("inner", true)//add class inner
  .attr("d", arci)
  .each(function(d) { this._current = d; })

在两个路径之间进行更改。

function change() {
    var value = this.value;
    clearTimeout(timeout);
    pie.value(function(d) { return d[value]; }); // change the value function
    path = path.data(pie); // compute the new angles
    path.select(".outer").transition().duration(750).attrTween("d", arcTweeno); // redraw the arcs
    path.select(".inner").transition().duration(750).attrTween("d", arcTweeni); // redraw the arcs
  }

工作代码here

d3元素与父节点数据的参考数据

1 个答案: