Javascript D3——嵌套的图形图表不显示所有的楔块

我一直在尝试制作一个饼图，但遇到了很多麻烦。我终于让外圈工作了，但内圈只显示了几块（外圈有3块，内圈有6块，但显示了3块）

有人知道这个代码有什么问题吗？这两个系统本身都工作得很好，但无论出于什么原因，当我把它们放在一起时，它们都不工作

20、10和5的楔形块不显示，每次都是这样

类的名称（“arc”）似乎也不重要

function makeDonut(svg) {
  var boundingBox = d3.select(svg).node().getBoundingClientRect();
  var h = boundingBox.height;
  var w = boundingBox.width;

  /*****   donut chart  *****/

  var data = [25, 40, 55];
  // arbitrary data

  var outerRadius = w/3;
  var innerRadius = 3*(outerRadius/4);
  var arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

  var pie = d3.pie();

  // order: gold, silver, bronze
  var color = d3.scaleOrdinal()
    .range(['#e5ce0c', '#e5e4e0', '#a4610a']);

  var arcs = d3.select(svg).selectAll("g.arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + (w/2) + "," + ((h-25)/2) + ")");

  arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .attr("stroke", "white")
  .style("stroke-width", "0.5px")
  .on('mouseover', function(d) {
    d3.select(this).attr('opacity', .7);

  })
  .on('mouseleave', function(d) {
    d3.select(this).attr('opacity', 1);
  });

  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.value;
    });

    /************ piechart ************/

    var dataset = [ 5, 10, 20, 45, 6, 25 ];
    // arbitrary dataset

    var outerRadius2 = 0.75 * (w/3);
    var innerRadius2 = 0;

    var arc2 = d3.arc()
      .innerRadius(innerRadius2)
      .outerRadius(outerRadius2);

    var pie2 = d3.pie();

    var color2 = d3.scaleOrdinal(d3.schemeCategory10);


    var arcs2 = d3.select(svg).selectAll("g.arc")
      .data(pie2(dataset))
      .enter()
      .append("g")
      .attr("class", "arc")
      .attr("transform", "translate(" + (w/2) + "," + ((h-25)/2) + ")");

    //Draw arc paths
    arcs2.append("path")
      .attr("fill", function(d, i) {
        return color2(i);
      })
      .attr("d", arc2);

    arcs2.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc2.centroid(d) + ")";
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.value;
      });
}

---

D3 enter方法在需要的地方在DOM中创建元素，以便对于数据数组中的每个项，DOM中都有一个适当的元素

对于您首先绘制的甜甜圈图表，您可以选择All（“g.arc”）-类

arc

中没有

g

元素，您的选择是空的。因此，当您使用enter方法时，D3为数据数组中的每个项创建一个元素。链接到

.enter（）

的所有内容，如果没有

.merge（）

方法，只会影响这些输入的元素

对于您第二次绘制的饼图，您可以选择All（“g.arc”）——但是，现在有三个

g

元素与类

arc

。因此，在这里使用enter方法时，enter选择不包括数据数组中前三项的元素：它们已经存在。相反，前三个元素包含在更新选择中

该功能是D3进入/更新/退出周期的核心

如果要输入所有内容，并且不更新或退出数据点，则可以简单地使用

.selectAll（null）

，它将创建一个空选择，对于该空选择，enter选择将为数据数组中的每个项目创建一个元素

如果以后要修改这些楔形/圆弧，可以通过在不同的

g

元素（例如：

g1.selectAll（“g.arc”）

和

g2.selectAll（“g.arc”）

中输入它们来区分这两个楔形/圆弧。或者，可以根据馅饼或甜甜圈为它们指定不同的类名，如下所示：

var svg=d3.选择（“svg”）；
var boundingBox=svg.node（）.getBoundingClientRect（）；
var h=边界框高度；
var w=边界框宽度；
/*****油炸圈饼图*****/
var数据=[25,40,55]；
//任意数据
外部无功功率=w/3；
var内半径=3*（外半径/4）；
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var pie=d3.pie（）；
//订单：金、银、铜
var color=d3.scaleOrdinal（）
.范围（['e5ce0c'、'e5e4e0'、'a4610a'）；
var arcs=svg.selectAll（“甜甜圈”）
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“甜甜圈”）
.attr（“转换”、“翻译”（+（w/2）+）”、“+（（h-25）/2）+”）；
arcs.append（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）
.attr（“笔划”、“白色”）
.样式（“笔划宽度”，“0.5px”）
.on（'mouseover'，函数（d）{
d3.选择（this）.attr（'opacity'，.7）；
})
.on（'mouseleave'，函数（d）{
d3.选择（this）.attr（'opacity'，1）；
});
arcs.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+弧形心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d值；
});
/************皮查特************/
var数据集=[5,10,20,45,6,25]；
//任意数据集
var outerRadius2=0.75*（w/3）；
var innerRadius2=0；
var arc2=d3.arc（）
.内半径（内半径2）
.outerRadius（outerRadius 2）；
var pie2=d3.pie（）；
var color2=d3.scaleOrdinal（d3.schemeCategory 10）；
var arcs2=svg.selectAll（“.pie”）
.数据（pie2（数据集））
.输入（）
.附加（“g”）
.attr（“类”、“派”）
.attr（“转换”、“翻译”（+（w/2）+）”、“+（（h-25）/2）+”）；
//绘制弧路径
arcs2.追加（“路径”）
.attr（“填充”，函数（d，i）{
返回颜色2（i）；
})
.attr（“d”，arc2）；
arcs2.追加（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+arc2.质心（d）+”）；
})
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d值；
})；

---

工作得很好，谢谢！我没有意识到DOM元素是这样工作的，现在更有意义了。我更改了类名。