Angular D3.js以角度拖动

经过近两天的研究，我仍然在努力理解Angular/Typescript中d3.js拖动行为的工作原理。我正在使用D3到Angular服务（）并将数据传递给代码段中的函数

添加圆并完美渲染，但绝对没有拖动行为

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);
}}

单击圆圈时，以下stacktrace显示在Chrome中：

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)

无法读取null的属性“ctrlKey”
在svgcirclelement.defaultFilter（drag.js:10）
在svgcirclelement.mousedowned处（drag.js:51）
在SVGCircleElement。（on.js:27）
在ZoneDelegate.invokeTask（zone.js:431）
位于Object.onInvokeTask（core.js:26919）
在ZoneDelegate.invokeTask（zone.js:430）
在Zone.runTask（Zone.js:198）
在ZoneTask.invokeTask[as invoke]（zone.js:513）
在invokeTask（zone.js:1671）
位于svgcirclelement.globalZoneAwareCallback（zone.js:1697）

谁能给我解释一下吗？我正在构建一个包含（希望）大量d3.js交互的应用程序，我真的很想了解它的行为

---

PS:使用d3.js和Angular/Typescript构建应用程序是否有良好的资源/最佳实践指南？

默认情况下，组件方法的“this”指针没有绑定。 一个快速修复方法是将公开的方法转换为“胖箭头函数”，该函数确实绑定了“this”指针

例如，从

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

到

---

默认情况下，组件方法不绑定其“this”指针。 一个快速修复方法是将公开的方法转换为“胖箭头函数”，该函数确实绑定了“this”指针

例如，从

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

到

---

不幸的是，做了更改后情况还是一样的：/不幸的是，做了更改后情况还是一样的：/我今天也在研究这个问题。在我的例子中，这些drag事件的第一个参数应该是DragEvent，但无论我使用胖箭头表示法还是经典函数（）表示法，它始终是未定义的。也许在你的d3版本中情况有所不同，但你是否得到了“d”的DrageEvent实例？你为什么要把它的x/y分配给它自己？我今天也在研究这个问题。在我的例子中，这些drag事件的第一个参数应该是DragEvent，但无论我使用胖箭头表示法还是经典函数（）表示法，它始终是未定义的。也许在你的d3版本中情况有所不同，但你是否得到了“d”的DrageEvent实例？为什么要将其x/y分配给自身？