1

（首先发布在谷歌组但没有回应，所以假设我应该在这里发布）。

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

这是一个显示问题的 js fiddle，缺少初始的绿色段：

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

在此处输入图像描述

和一个没有正确显示所有段的饼图的 js fiddle：

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

在此处输入图像描述

在此行上创建节点变量后，我检查了它：

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

并且两个示例中的值似乎相同。

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

这应该可行还是不能将两种不同的布局放在一起？有没有更好的方法来实现同样的目标？

4

1 回答 1

1

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

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

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。

于 2012-06-29T15:08:27.437 回答