Как перевести "это" в D3 JavaScript для TypeScript?

Question

Я знаю, что "this" в JavaScript имеет другое значение, чем в TypeScript, в соответствии с этой статьей "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 не имеет различного значения между JavaScript и TypeScript.

При этом ваша проблема здесь гораздо прозаичнее: вы пытаетесь использовать this в функции стрелки, чтобы получить текущий элемент DOM, и это просто не будет работать.

Итак, в двух словах, проблема здесь заключается в разнице this между функцией стрелки и обычной функцией, а не между TypeScript и JavaScript.

Решение

Есть альтернатива this, описанный везде в API: когда вы используете анонимную функцию в большинстве методов D3, аргументы передаются...

... текущее значение (d), текущий индекс (i) и текущая группа (узлы), с this в качестве текущего элемента DOM (node ​​[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` недоступно

Answer 2

На самом деле это не ответ, я ничего не знаю о D3, так что понизьте, если нужно, но это должно быть указано в очевидном месте для любого, кто читает этот вопрос.

Предпосылка этого вопроса, Как перевести "это" в D3 JavaScript для TypeScript? ложно Я не понизил голос, потому что это важно для обучения.

Я просто хочу уточнить, что this на 100% идентичны в TypeScript и JavaScript

Фактически, весь синтаксис TypeScript, который также является допустимым синтаксисом JavaScript, имеет точно такую ​​же семантику.

Это то, что делает 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

Ответ состоял в том, чтобы заменить "это" на "d3.event.currentTarget"

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