我正在使用 d3 制作堆积条形图。
数据是一个数组,每个条都有一个对象(例如“喜欢”)。然后每个对象都包含一个值数组,这些值驱动每个条形图的各个矩形:
data = [{
key = 'likes', values = [
{key = 'blue-frog', value = 1},
{key = 'goodbye', value = 2}
]
}, {
key = 'dislikes, values = [
{key = 'blue-frog', value = 3},
{key = 'goodbye', value = 4}
]
}]
图表工作正常,如下所示:
// Create canvas
bars = svg.append("g");
// Create individual bars, and append data
// 'likes' are bound to first bar, 'dislikes' to second
bar = bars.selectAll(".bar")
.data(data)
.enter()
.append("g");
// Create rectangles per bar, and append data
// 'blue-frog' is bound to first rectangle, etc.
rect = bar.selectAll("rect")
.data(function(d) { return d.values;})
.enter()
.append("rect");
我想为每个矩形创建工具提示,上面写着“喜欢:2”之类的内容,这涉及将有关条形键的信息绑定(bind)到矩形。我还没有找到执行此操作的方法(除了更改数据)。你能找到一个优雅的解决方案吗?
另外,我不确定我是否以最好的方式描述了这个问题。如果您对更好的标题有任何建议,请告诉我。
最佳答案
不确定您是否认为这是一个优雅的解决方案,但它避免了更改您的数据。
它利用了一些关键的“特征”:
- 您可以自由获取对选择数组的引用,然后使用选择数组(但要使用此数组,您需要知道当前的选择组 - 请参阅最后一点)
- 通过.parentNode属性,可以获取父节点的DOM元素
- 通过__data__属性,可以获取到父节点的关联数据
- 数据访问函数 function(d,i){....} 可以以 3 参数形式提供:function(d,i,j){.. .. 其中 j 是当前选择组。
因此,在您的示例中,您可以获得选择数组:
var selection = bar.selectAll("rect")
.data(function(d) { return d.values;})
.enter();
从选择数组中,您可以获得有问题的数据:
selection
.append("li")
.text(function(d,i,j) {
return selection[j].parentNode.__data__.key;
}
在这种情况下更容易看到完整的示例,而不是代码片段:
正如我在要点上提到的那样——我记得读过有关数据访问器函数的这种三参数形式的文章,但我记不住在哪里——我希望有人指出记录这个“特性”的源 Material '.
关于javascript - d3.js:将数据从父节点传递到子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13662756/