d3 v4使用TypeScript进行拖放

Question

我正在使用D3库v4和Angular2，我想要拖放svg元素。我有一个代码：

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

我收到此错误：

  

TS2345：类型＆＃39; DragBehavior＆＃39;不能分配给＆＃39;类型的参数（选择：选择，... args：any []）=＆gt;无效＆＃39 ;.     参数类型＆＃39;选择＆＃39;和选择＆＃39;是不相容的。       输入＆＃39;选择＆＃39;不能分配类型＆＃39;选择＆＃39;。         输入＆＃39; BaseType＆＃39;不能分配给＆＃39;元素＆＃39;。           输入＆＃39; EnterElement＆＃39;不能分配给＆＃39;元素＆＃39;。             财产＆＃39; classList＆＃39;类型＆＃39; EnterElement＆＃39;中缺少。

有什么想法吗？

Answer 1

我尝试使用this sample中的代码，但它显示相同的错误。 我用另一种方式写它：

svg.selectAll("circle")
    .data(circles)
    .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", radius)
    .style("fill", 'blue');

svg.selectAll("circle").call(d3.drag().on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

它对我有用。

Answer 2

请回复帖子中类似的SO问题，查看我的回答。

它解释了确保拖动行为及其操作选择具有兼容的底层元素类型和绑定数据类型的必要性和方法。

按照那里列出的步骤，根据您的情况，将解决问题。

Answer 3

我仍然不确定既避免编译错误又避免伪造类型系统的最正确方法是什么？但是，即使按照以下方式，它似乎也能正常工作：

this.svgGraph
  .append('line')
  .call(d3.drag<SVGLineElement, unknown>()
    .on('drag', this.dragged())
  );

因此“强制” SVGLineElement类型。

你怎么看？