在将森伯斯特放在馅饼上时，在d3中丢失了部分

Question

（首先在google网上发布，但没有回应，所以假设我应该在这里发帖）。

我试图在馅饼（黄色和白色部分）上铺设一个旭日（彩色弧线）。

这是一个显示问题的js小提琴，缺少最初的绿色片段：

http://jsfiddle.net/qyCkB/1/：

和没有饼的js小提琴，其中所有片段都正确显示：

http://jsfiddle.net/X3sRy/1/

我在此行上创建后检查了node变量：

  var nodes = partition.nodes({'values': data});

并且两个示例中的值看起来都相同。

在检查DOM时，它只是没有绘制旭日的前几段。

这是否可行或是否无法将两种不同的布局相互叠加？ 是否有更好的方法来实现同样的目标？

Answer 1

您的第二个数据联接与第一个数据冲突发生冲突。你的第一个数据连接是在“g.arc”上，所以你应该添加带有“arc”类的G元素（而不是“clock_arc”）。您的第二个数据连接位于“路径”上，无意中选择了之前添加的路径元素。由于您的第二个数据连接与先前添加的元素匹配，因此您不会输入饼图的所有预期元素。

您需要消除饼道路径元素中的旭日路径元素的歧义。您可以这样做的一种方法是按类而不是元素类型进行选择，因此第二个数据连接变为“.pie”而不是“path”。像这样：

var gClock = svg.selectAll(".clock")
    .data(clockData)
  .enter().append("g")
    .attr("class", "clock");

var pathClock = gClock.append("path");

var pathPie = svg.selectAll(".pie")
    .data(pieData)
  .enter().append("path")
    .attr("class", "pie");

我还建议您阅读这些教程，如果您还没有：Thinking with Joins，Nested Selections，Object Constancy。