Question

我试图通过d3.js使用绑定数据。我跟着documentation，现在有点困惑。

我想制作半径图，其半径因数据而异。我很自在地使用数组生成圆弧以构成圆环，但是我很难确定如何使用圆弧的数据绑定传递尺寸参数。例如，如果绑定到弧的父级的数据类似于{size: 20, cont: [1, 7]}，那么如何将数组的第一个元素以及绑定为大小元素？我有一个fiddle试图展示我在说什么。在该示例中，两个甜甜圈应该是不同的尺寸。我已经评论过我怀疑应该在第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");

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

Answer 1

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

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

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

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

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

使用继承的绑定数据中的字段

1 个答案: