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

Question

我有这样一个对象，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__访问父数据？

Answer 1

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

例如:

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; });