d3 v4 drag and drop with TypeScript

user_8017391 0
Viewed 4427

I am using the D3 library v4 and Angular2 and I want to make a drag and drop of svg elements. I have a code:

item.call(
    d3.drag()
      .on("start", dragStarted)
      .on("drag", dragged)
      .on("end", dragEnded)
  );

and

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

I get this error:

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'.

Any ideas?

d3.js drag-and-drop
3 Answers

I'm still not sure what's the most correct way to both avoid compilation error but also avoid faking the type system... But it seems working even in the following way:

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

so 'forcing' the type SVGLineElement.

what do you think?

user_20109550
Related