3772

d3 v4 drag and drop with TypeScript

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?

Answer1:

I tried to use code from this sample but it show the same error. I write it in another way:

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

And it works for me.

Answer2:

Please see my answer in response to a similar SO issue post here.

It explains the need for and approach to ensuring that the drag behavior and the selection it operates on have compatible underlying element types and bound data types.

Following the steps outlined there, adapted to your situation, will address the issue.

Recommend

  • SQLException: the result set is closed
  • How do I call the Pie function?
  • Flexbox: how to add margin / vertical spacing for the case there is more than one row?
  • Image scaling geometry
  • In LinqPad, is there a way to serialize type XML column as string?
  • Assembly Language Absolute addresses and segment registers
  • Angular 2 + Jasmine Unit Test - Getting Error TS2345
  • D3 - Drawing a path between DOM elements
  • jquery code not working without breakpoint
  • apply a javascript function to draggable copy
  • Blackberry 6: how to detect a long click on track pad?
  • In loopback documentation what does variable 'cb' stands for?
  • Getting the scrolling offset when storing coordinates
  • Bigquery event streaming and table creation
  • TFS 2015 - Waiting for an agent to be requested
  • Subclassing QGraphicsItem prevents me from being able to use itemAt() on a QGraphicsScene/View
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • Simulate click Geckofx vb,net
  • saving file generated by TCPDF
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • AJAX Html Editor Extender upload image appearing blank
  • JQuery Internet Explorer and ajaxstop
  • Why does access(2) check for real and not effective UID?
  • Illegal mix of collations for operation for date/time comparison
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • R: gsub and capture
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Hits per day in Google Big Query
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Linking SubReports Without LinkChild/LinkMaster
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?