如何将 D3 JavaScript 中的“this”翻译成 TypeScript？

Question

根据这篇文章'this' in TypeScript，我知道 JavaScript 中的“this”与 TypeScript 中的含义不同。我在 JavaScript 中有以下代码，用于在所选节点上创建较粗的笔划，并为所有其他节点提供较小的笔划。

node.on('click', function (d) {
   d3.selectAll('circle').attr('stroke-width', 1.5);
   d3.select(this).select('circle').attr('stroke-width', 5);
})

在 TypeScript 中我有

this.node.on('click', (d:any) => {
   this.node.selectAll('circle').attr('stroke-width', 1.5);
   [this is where I need help].select('circle').attr('stroke-width', 5);
}

Answer 1

正如this comment 和this answer 中所述，this 不在 JavaScript 和 TypeScript 之间有不同的含义。

话虽如此，您的问题更简单：您试图在箭头函数中使用this 来获取当前的DOM 元素，但这根本行不通。

所以，简而言之，这里的问题是箭头函数和常规函数之间this 的区别，而不是 TypeScript 和 JavaScript 之间的区别。

解决方案

this 的替代方案在 API 中到处都有描述：当您在大多数 D3 方法中使用匿名函数时，传递的参数是...

...当前数据 (d)、当前索引 (i) 和当前组 (nodes)，this 作为当前 DOM 元素 (nodes[i])。

因此，this 只是节点组（第三个参数）的当前索引（第二个参数）。

所以，在下面的sn-p中：

selection.on("foo", function (d, i, n){
    console.log(this)
    console.log(n[i])
})

两个console.log 将返回相同的东西。

当您使用箭头函数时，解决方案是（在 JavaScript 中）：

this.nodes.on("click", (d, i, n) => {
    d3.select(n[i])//rest of your code here
})

如果您想详细了解如何使用第二个和第三个参数来获取 DOM 元素，请查看以下示例：d3 v4 retrieve drag DOM target from drag callback when `this` is not available

Answer 2

这个问题的前提，如何将 D3 JavaScript 中的 'this' 翻译成 TypeScript？，是错误的。我没有投反对票，因为教育很重要。

我只想澄清this 在 TypeScript 和 JavaScript 中是 100% 相同的

事实上，all TypeScript 语法也是有效的 JavaScript 语法，具有 exact 相同的语义。

这就是使 TypeScript 成为 JavaScript 超集的原因。

更新：我实际上会修改这个答案，因为问题是你认为含义不同。你对箭头函数语法感到困惑

(params) => expression or block

首先=> 不是 TypeScript 功能，而是 JavaScript 功能。

其次，如上所述，TypeScript 自然支持这两种形式。这意味着不需要翻译。

this 在 TypeScript 中的含义与在 JavaScript 中的含义相同。

在这两种语言中，它在=> 的上下文中的含义与在function 的上下文中的含义不同。 SO上有很多很多解释这个的答案，所以我不会重复。

这就是这个问题的答案。

如果你有这个文件：

d3-app.js

node.on('click', function (d) {
  d3.selectAll('circle').attr('stroke-width', 1.5);
  d3.select(this).select('circle').attr('stroke-width', 5);
});

它可以工作，你想用 TypeScript 重写它。

这是你要做的：

1. 将 d3-app.js 重命名为 d3-app.ts

就是这样。

Answer 3

答案是将“this”替换为“d3.event.currentTarget”

d3.select(d3.event.currentTarget).select('circle').attr('stroke-width', 5);