D3.js-选择器

获取当前元素

1
2
3
4
5
6
7
8
textEnter
  .enter()
  .append('rect')
  // 使用普通的 function解决this指向问题
  .attr('x', function (d) {
    // 获取父元素绑定的数据
    const selfElement = d3.select(this);
  });

注意：因为在 D3.js 的 attr 回调函数中，this 的上下文可能不如预期。为了确保 this 指向正确的 DOM 元素，需要使用普通的 function 而不是箭头函数。

获取父元素的数据

常用于 tspan 中，获取父元素的数据，做一些业务判断：

1
2
3
4
5
6
7
8
9
textEnter
  .enter()
  .append('tspan')
  .text((d) => d)
  // 使用普通的 function解决this指向问题
  .attr('x', function (d) {
    // 获取父元素绑定的数据
    const parentData = d3.select(this.parentNode).datum();
  });

获取和元素绑定的数据

1
2
3
nodeText.data((datum) => {
  console.log(datum);
});