gpt4 book ai didi

javascript - 将数据从父选择传播到子选择 (D3)

转载 作者:行者123 更新时间:2023-12-03 08:52:06 24 4
gpt4 key购买 nike

我有这样一个对象,data ,我想用它创建一个选择。

var data = [
{
range: 30,
color: 'blue',
},
{
range: 50,
color: 'red'
}
];

所以我做了类似的事情

var group = chart.selectAll('g')
.data(data)
.enter().append('g');

现在我想追加一些circle等于 data['range'] 的元素.

var circle = group.selectAll('circle')
.data(function(d) { return d3.extent(d.range); })
.enter().append('circle');

所以这是我的问题,能够从其子级中的父级选择访问数据的最佳实践是什么。例如,我想访问 data['color'] circle 的几个属性.

到目前为止,我一直在使用 each()然后将该属性应用于 circle递归元素

var circle = group.selectAll('circle')
.data(function(d) { return d3.range(d.range); })
.enter().append('circle');

circle.each(function(d) {
var parentData = this.parentNode.__data__;
d3.select(this).attr('fill', function() { return parentData.color; });
});

是否有一种更有效的做法来绑定(bind)到父数据,不需要使用each()并通过this.parentNode.__data__访问父数据?

最佳答案

通常,我认为最简单的方法是创建一个包含范围值和颜色的对象。

例如:

var circle = group.selectAll('circle')
.data(function(d) {
return d3.range(d.range).map(function (rangeValue) {
// returns an item that combines range value and color from parent data
return {
range: rangeValue,
color: d.color
};
});
})
.enter()
.append('circle')
.attr('r', function (d) { return d.range; })
.attr('fill', function (d) { return d.color; });

关于javascript - 将数据从父选择传播到子选择 (D3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32637754/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com