Невозможно вызвать метод в компоненте из d3.call ()

Question

Я использую D3 для перетаскивания ссылок следующим образом:

.call(d3.drag()
  .on("start", linkDragStart)
  .on("drag", linkDragging)
  .on("end", linkDragEnd));

Теперь я удалил эту функцию из метода и поместил ее как отдельный метод. Поэтому я изменяю код выше:

.call(d3.drag()
  .on("start", linkDragStart)
  .on("drag", linkDragging)
  .on("end", this.linkDragEnd));

Метод вызывается. Проблема в том, что когда используется ключевое слово this внутри метода linkDragEnd, оно получает ссылку на путь d3, по которому вызывается метод. Есть ли обходной путь для этого?

Answer 1

Есть два возможных решения. Во-первых, как предлагается в комментариях, использовать bind, то есть вместо непосредственного использования метода this.linkDragEnd, использовать его связанную версию:

.call(d3.drag()
                .on("start", linkDragStart)
                .on("drag", linkDragging)
                .on("end", this.linkDragEnd.bind(this));

Другая возможность - когда вы нацеливаетесь на современный JavaScript (по крайней мере, ES6) или используете какой-то транспортер (достаточно TypeScript, как предложено тегами). Затем вы можете определить этот метод не как истинный метод, а как свойство, значением которого является функция стрелки:

linkDragEnd = (/* arguments here */) => {
    /* function body here */
}

Поскольку функции стрелок имеют различное поведение this, они могут использоваться в качестве обратных вызовов без явного связывания, если они ссылаются на объект, в котором они созданы.