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

Question

我知道在JavaScript中，“this”的含义与TypeScript中的不同，如此文章所述TypeScript中的“this”。我有以下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);
}

- H. Trujillo

---

你为什么想要它？只需使用第一个片段就可以了，它完全没问题，你不需要箭头函数语法。 - dfsq

在TS和JS中，“this”具有完全相同的含义和行为。看到更多代码会很有趣。奇怪的是，您将“this.node”用作“d3”和“node”的替代品。在您的情况下，这样做是否正确？ - dfsq

@artem 你说得对，我误解了那个，但是我仍然理解在代码块的上下文中，“this”的含义有所不同。 - H. Trujillo

探索 d 对象，也许它与第一个片段中的 this 一样引用了节点。 - dfsq

@dfsq 很遗憾，使用 d 对象（第一个参数）无法获取 DOM 元素。但是，第二个和第三个参数可以轻松地用于获取 this（在 D3 方法中表示当前的 DOM 元素）。 - Gerardo Furtado

Answer 1

如在此评论和此回答中已经说明，this 在 JavaScript 和 TypeScript 中没有不同的意义。

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

因此，简而言之，这里的问题是箭头函数和常规函数之间的 this 差异，而不是 TypeScript 和 JavaScript 之间的差异。

解决方案

D3 API 中几乎所有方法中都有一个替代 this 的方法：当你在其中大多数方法中使用匿名函数时，传递的参数是...

  

... 当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 是当前的 DOM 元素 (nodes[i])。

因此，this 简单地是节点组的当前索引 (第二个参数)。

因此，在下面的代码片段中：

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从拖动回调中检索拖动DOM目标当`this`不可用时。

- Gerardo Furtado

---

不管这个在JavaScript和TypeScript之间是否有区别（我对此表示怀疑），我只想说你的怀疑是正确的。在原始问题中提出的声明是完全错误的。它们在行为上没有任何区别。 - Aluan Haddad

@AluanHaddad 感谢您的评价。由于我从未使用过TypeScript，因此我不想肯定地说什么，但是，由于TypeScript编译为纯JavaScript，所以那种说法是没有意义的。 - Gerardo Furtado

正确来说，它并不是关于编译成JavaScript。例如，Dart也可以编译成JavaScript，但Dart对待this的方式不同。这是因为TypeScript是JavaScript的_超集_。这就是该语言的定义。这意味着所有JavaScript结构在源级别上具有相同的含义，而不是在编译输出中。 - Aluan Haddad

Answer 2

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

我只想澄清一下，在TypeScript和JavaScript中，'this'是完全相同的。

事实上，所有在TypeScript中也有效的JavaScript语法具有完全相同的语义。

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

更新：实际上，我会用一个答案来修正这个问题，因为你认为意思不同。你对箭头函数语法感到困惑。

(params) => expression or block

首先，'=> '不是TypeScript的特性，而是JavaScript的特性。

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

在TypeScript中，'this'与在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

就这样。

- Aluan Haddad

Answer 3

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

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

- H. Trujillo

---

看我的回答，我会解释如何在TypeScript中“重写”它。 - Aluan Haddad

实际上，看一下@GerardoFurtado的答案，他对d3有更多的了解。 - Aluan Haddad