d3.js - 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: Argument of type 'DragBehavior' is not assignable to parameter of type '(selection: Selection, ...args: any[]) => void'. Types of parameters 'selection' and 'selection' are incompatible. Type 'Selection' is not assignable to type 'Selection'. Type 'BaseType' is not assignable to type 'Element'. Type 'EnterElement' is not assignable to type 'Element'. Property 'classList' is missing in type 'EnterElement'.

有什么想法吗？

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

它对我有用。