0

我正在尝试使用带有 d3.js 的绑定数据来解决问题。我正在关注文档，现在有点困惑。

我想制作圆环图，其半径因数据而异。我很乐意使用数组制作弧线以组成甜甜圈，但很难弄清楚如何通过弧线的数据绑定传递大小参数。例如，如果绑定到弧的父级的数据类似于{size: 20, cont: [1, 7]}，我如何绑定数组的第一个元素以及size 元素？我有一个小提琴试图展示我在说什么。在那个例子中，两个甜甜圈应该是不同大小的。我已经注释掉了我怀疑应该在第 14 行进行的那种事情。

我尝试了以下变化：

var arcs = donuts.selectAll(".arc")
           .data(function(d) { var temp = [];
                    temp.push(d.cont);
                    temp.push(d.size);
                    return temp; })
           .enter()
           .append("g")
           .attr("class", "arc");

但它显然没有产生我期望的结果。

4

1 回答 1

1

这里的问题实际上并不是数据继承，而是您将原始数据传递给布局，然后仅将结果传递给绘图函数的事实。饼图布局确实将原始数据存储在.data结果的成员中，但您只是将原始数据的一部分传递给它。

“正确”的做法是重构您的数据结构，以便您可以按原样传递它并使用饼图布局的.value()函数来告诉它如何访问数据。然后就可以直接访问原始数据了。

然而，有一个更快的解决方案——您可以简单地使用传递给您的函数的索引来索引原始数组。这个代码看起来像这样。

.attr("d", function(d, i, j) { return arc.outerRadius(dataset[j].size)(d); })

请注意，这里需要两个索引，因为您有嵌套数据 -i将是单个饼图的值数组中的索引，而j表示高于该级别的元素的索引。在这里更新了 jsfiddle 。

于 2013-10-04T08:33:25.427 回答