javascript - D3 回调函数的 `this` 阴影对象的 `this`

Question

我有一个包装 D3 的类。我正在将它转换为 TypeScript，但出现以下两个错误，但无法弄清楚如何修复它们(实际上有多个错误，但它们都与这对错误相似)，

src/d3-graph.ts:295:19 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. 
295         d3.select(this)
                      ~~~~

  src/d3-graph.ts:294:23
    294       .on('mouseout', function(d: any) {
                              ~~~~~~~~
    An outer value of 'this' is shadowed by this container.

代码(类中的一个方法，添加了行号以供引用)，

...
1 private _enableNodeHighlightOnHover() {
2   this._nodes
3     .on('mouseout', function(d: any) {
4       d3.select(this)
5         .style('stroke-width', '2px')
6     })
7 }
...

注意第 2 行，this 指的是类的实例对象。

在第 4 行，this 指的是对象 D3 已绑定(bind)到提供给 on 的回调(第 3 行)。还要注意在 (...) => { ... } 上使用 function —— 允许 D3 将 this 绑定(bind)到它需要的对象。

如果我可以访问我在 d3.select(this) 中使用的 D3 对象，我很乐意在回调函数中丢失 this 用法以其他方式。但我不确定那会是什么。

此模式还有其他用途需要考虑，

private _enableDrag() {
  const that = this

  this._drag = d3.drag()
  this._drag
    .on('drag', function(d: any) {
      d.x += d3.event.dx
      d.y += d3.event.dy

      d3.select(this)
        .attr('cx', d.x)
        .attr('cy', d.y)

      that._links.each(function(l: any) {
        if (l.source === d.id)
          d3.select(this)
            .attr('x1', d.x)
            .attr('y1', d.y)
        else if (l.target === d.id)
          d3.select(this)
            .attr('x2', d.x)
            .attr('y2', d.y)
      })

      if (that._nodeTextLabels === null)
        logger.warn(
          'enableDrag called before this._nodeTextLabels has been initialized')
      else
        that._nodeTextLabels.each(function(n: any) {
          if (n.id == d.id)
            d3.select(this)
              .attr('x', d.x + D3Graph._LABEL_FONT_SIZE / 2)
              .attr('y', d.y + 15)
        })

      that._nodes.each(function(n: any) {
        if (n.id == d.id)
          d3.select(this).select('circle')
            .attr('cx', d.x)
            .attr('cy', d.y)
      })
    })
}

Answer 1

作为 this 的替代方法，尝试使用监听器函数的第二个和第三个参数:

  function(d,i,group) { d3.select(group[i] ... })

这是有效的，因为当使用 selection.on("event",function(){}) 或 selection.each(function() {}) 时，d3 绑定(bind)this 的当前元素用于提供的函数。 D3 还将三个参数绑定(bind)到提供的函数:

• 当前数据(d)
• 当前索引(i)
• 选择中的元素组，而不是元素的选择(这里命名为group)

使用时:

selection.on("event", function() { d3.select(this); })

你实际上在做同样的事情:

selection.on("event", function(d,i,group) { d3.select(group[i]); })

由于group保存的是选择的元素，i是当前索引，group[i]是当前元素，即与 this 相同。

使用 group[i] 允许使用可能会改变 this 上下文的箭头函数和环境，同时仍然访问当前元素。