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

Propagate Data from Parent to Child Selection (D3)

本文关键字：选择 D3 传播 数据      更新时间：2023-09-26

我有一个对象，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');

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

到目前为止，我一直在使用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; });
});

是否有一个更有效的实践绑定到父数据，一个不需要使用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; });
相关文章：