Javascript 如何在d3.js的包布局中插入饼图？

大家好，我想在我的包布局中添加饼图，而不是简单的圆

假设这是我的饼图数据和饼图布局

var data=[2,3,4,5]

var arc=d3.svg.arc（） .外层（50） .内半径（0）

var pie=d3.layout.pie（） .sort（空）

这就是packlayout如何绘制圆的方式

  var circle = svg.selectAll("circle")
  .data(nodes1)
  .enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); 

---

有谁能解释一下，我是如何在包装布局中添加路径并用它制作饼图的，而不是添加圆圈的？！[在此处输入图像描述][1]

您可以使用从包布局输出的

r

值来定义

arc

生成器的

外部曲面。然后，您可以附加svg
g
元素，并在其中附加每个弧，而不是将svg
circle
元素附加到图表中：

完整示例：

相关代码：

var bubble = d3.layout.pack()
      .value(function(d) { return d3.sum(d[1]); })
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5),
    arc = d3.svg.arc().innerRadius(0),
    pie = d3.layout.pie();

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var nodes = svg.selectAll("g.node")
    .data(bubble.nodes({children: data}).filter(function(d) { return !d.children; }));
nodes.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var arcGs = nodes.selectAll("g.arc")
    .data(function(d) {
      return pie(d[1]).map(function(m) { m.r = d.r; return m; });
    });
var arcEnter = arcGs.enter().append("g").attr("class", "arc");

arcEnter.append("path")
    .attr("d", function(d) {
      arc.outerRadius(d.r);
      return arc(d);
    })
    .style("fill", function(d, i) { return color(i); });

谢谢你，乔希！虽然我尝试了另一种方法，将饼图移动到各个包装布局气泡的位置，但它仍然有效。此处更新为v4：
var bubble = d3.layout.pack()
      .value(function(d) { return d3.sum(d[1]); })
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5),
    arc = d3.svg.arc().innerRadius(0),
    pie = d3.layout.pie();

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var nodes = svg.selectAll("g.node")
    .data(bubble.nodes({children: data}).filter(function(d) { return !d.children; }));
nodes.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var arcGs = nodes.selectAll("g.arc")
    .data(function(d) {
      return pie(d[1]).map(function(m) { m.r = d.r; return m; });
    });
var arcEnter = arcGs.enter().append("g").attr("class", "arc");

arcEnter.append("path")
    .attr("d", function(d) {
      arc.outerRadius(d.r);
      return arc(d);
    })
    .style("fill", function(d, i) { return color(i); });