D3. js Перетаскивание в Angular

Question

после исследования в течение почти 2 дней я все еще пытаюсь понять, как работает d3. js поведение перетаскивания в Angular / Typescript. Я использую сервис D3 для Angular (npm зависимость ) и передаю данные функции в фрагменте.

Круги добавлены и отрисованы идеально, но поведение перетаскивания абсолютно отсутствует.

render(data: any[]): void {

    let d3 = this.d3;

    this.d3SVG
       .selectAll('circle')
       .data(data)
       .enter()
       .append('circle')
           .attr("cx", d => d.x)
           .attr("cy", d => d.y)
           .attr("r", this.radius)
           .attr("fill", 'red')
           .style("stroke", 'black')
           .on("mouseout", function (d) { // TODO})
           .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended)
  );

 function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
}

function dragged(d) {
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function dragended(d) {
    d3.select(this).classed("active", false);
}}

При нажатии на кружки в Chrome отображается: *1018*:

Cannot read property 'ctrlKey' of null
    at SVGCircleElement.defaultFilter (drag.js:10)
    at SVGCircleElement.mousedowned (drag.js:51)
    at SVGCircleElement.<anonymous> (on.js:27)
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:26919)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at ZoneTask.invokeTask [as invoke] (zone.js:513)
    at invokeTask (zone.js:1671)
    at SVGCircleElement.globalZoneAwareCallback (zone.js:1697)

Кто-нибудь может мне это объяснить? Я создаю приложение с (надеюсь) большим количеством d3. js взаимодействия и действительно заинтересован в понимании поведения.

PS: Существуют ли хорошие ресурсы / рекомендации по передовой практике для создания приложений с d3. js и Angular / Typescript?

Answer 1

Компонентные методы по умолчанию не имеют своего указателя this. Быстрое решение состоит в том, чтобы превратить ваш открытый метод в «функцию жирной стрелки», которая имеет ограниченный указатель «this».

Так, например, измените значение с

function dragstarted(d) {
    d3.select(this).raise().classed("active", true);
}

на

const dragstarted = (d) => {
    d3.select(this).raise().classed("active", true);
}