На самом деле смотрите ответ @ GerardoFurtado, у него есть больше ноу-хау d3.

ю, что «это» в JavaScript имеет другое значение, чем в TypeScript, как в этой статье«это» в 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);
}
 artem21 апр. 2017 г., 21:36
@ H.Trujillo Это не то, что говорится в этой статье. Это говорит о том, что в JavaScript, а также в TypeScript,this ведет себя иначе, чемДругой языки.
 dfsq21 апр. 2017 г., 21:32
this имеет абсолютно одинаковое значение поведение в TS и JS. Было бы интересно увидеть больше кода. Странно, что вы используетеthis.node в качестве заменыd3 и дляnode одновременно. Это правильно в вашем случае?
 H. Trujillo21 апр. 2017 г., 21:21
Потому что «это» не означает то же самое в JavaScript, что и в TypeScript, и я пытаюсь найти «правильный» способ реализации кода JavaScript для приложения Angular 2.
 dfsq21 апр. 2017 г., 21:19
Зачем тебе это? Просто используйте первый фрагмент, это прекрасно, вам не нужен синтаксис функции стрелки.
 Gerardo Furtado22 апр. 2017 г., 11:31
@dfsq, к сожалению, невозможно получить элемент DOM, просто используяd объект (первый аргумент). Тем не менее, второй и третий аргументы могут быть легко использованы для полученияthis (который в методах D3 является текущим элементом DOM).

Ответы на вопрос(3)

На самом деле это не ответ, я ничего не знаю о 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.

Вот что ты делаешь:

переименоватьd3-app.js вd3-app.ts

Это все.

Как уже говорилось вэтот комментарий а такжеэтот ответ, 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` недоступно

 Aluan Haddad22 апр. 2017 г., 10:59
Независимо от того, в чем разница между JavaScript и TypeScrip (в чем я сомневаюсь) Я просто хочу сказать, что вы сомневаетесь правильно. Это утверждение, сделанное в ОП, на 100% ложно. Тамнет Разница между их поведением вообще.
 Aluan Haddad22 апр. 2017 г., 11:13
Правильно, это не так уж много о компиляции в JavaScript на самом деле. Например, Дарт, но Дарт лечитthis по-другому. Это о том, что TypeScript являетсянадстройка JavaScript. Это определение языка. Это означает, что все конструкции JavaScript имеют одинаковое значение не в скомпилированном выводе, а на уровне исходного кода.
 Aluan Haddad22 апр. 2017 г., 11:37
Очень хорошее обновление.
 H. Trujillo24 апр. 2017 г., 14:38
@GerardoFurtado спасибо за объяснение, это именно то, что мне нужно!
 Gerardo Furtado22 апр. 2017 г., 11:10
@AluanHaddad Спасибо за это. Поскольку я никогда не использовал TypeScript, я не хотел говорить что-либо с уверенностью, но да, поскольку TypeScript компилируется в простой JavaScript, что утверждение не имеет смысла.

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

d3.select(d3.event.currentTarget).select('circle').attr('stroke-width', 5);
 Aluan Haddad22 апр. 2017 г., 11:30
Смотрите мой ответ, я объясняю, как «переписать» его в TypeScript
 Aluan Haddad22 апр. 2017 г., 11:42
На самом деле смотрите ответ @ GerardoFurtado, у него есть больше ноу-хау d3.

Ваш ответ на вопрос