Question

我有数据数组，如果我想将这些数据呈现为文本，我将使用下一个代码

footer_item = svg_selection.append('g')
    .attr('class', 'footer_data')
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')

footer_item.append('text')
  .text((d) => d)
  ...

如果不是文字我想画一些形状怎么办？我可以使用这种方法

footer_item
  .each((d) => {
    // draw some shape
    // don't know how to refer to footer_pointer
     draw_my_shape(footer_item_pointer, d.x, d.y);
  })

function draw_my_shape(footer_item_pointer, x, y){

    footer_item_pointer
      .append('circle')
      .attr('cx', x)
      .attr('cy', y)
      ... 
}

这种方法的唯一问题是我将丢失指向footer_item的指针。我需要指向footer_item的指针来在g元素中绘制我的形状。

是否可以将带有footer_item函数的.each()指针发送到我的绘制回调？

我可以使用.call()功能吗？我试过了，但d变量将包含完整选择和完整数据。我会再来到我开始的地方。

Answer 1

如果我理解正确，您想要访问footer_item功能内的each。您可以使用箭头函数 not 并在函数中使用this的范围值来执行此操作：

footer_item.each(function(d, i) {
        //"this" refers to the <g> html element that footer_item points to
        var foo = d3.select(this);
     });

然后，您可以在该选择之上绘制更多形状：

foo.append('circle').attr(...
foo.append('rect').attr(...

如何在d3.js中将当前选择传递给.each（）回调？

1 个答案: