Question

我有一个对象data，我想用它来创建一个选择。

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

所以我做了类似

的事情

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

现在我想添加一些等于circle的{{1}}元素。

data['range']

所以这是我的问题，能够从其子项中的父选择中访问数据的最佳做法。例如，我想访问{{1在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; }); });访问父数据？

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

将数据从父选择传播到子选择（D3）

1 个答案: