Uncaught Error: unknown type: dragend in d3.js v5.4.0

Question

I am using the d3.js v5.4.0.

Here is the error I am getting: Uncaught Error: unknown type: dragend.

It is because I am trying to do the following:

            d3.drag()
            .subject(function(d){
                return {x: d.x, y: d.y};
            })
            .on("drag", function(args){
                thisGraph.state.justDragged = true;
                thisGraph.dragmove.call(thisGraph, args);
            })
            .on("dragend", function() {
                // todo check if edge-mode is selected
            });

And dragend seems to be deprecated now.

I tried to find out the release notes which would describe the alternative to this in the newer versions over here, but was not able to do that.

Please, help me to tackle the problem.

score 4 · Accepted Answer · answered May 27 '18 at 16:14

The three events that you can listen for with a drag are currently (v4 & 5. v3 and prior were different):

start - after a new pointer becomes active (on mousedown or touchstart). drag - after an active pointer moves (on mousemove or touchmove). end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). (docs)

So, you should just need to change dragend to end

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",300);
  
var circle = svg.append("circle")
  .attr("cx",100)
  .attr("cy",100)
  .attr("r",20)
  .attr("fill","steelblue")
  .call(d3.drag().on("start", function() {
      d3.select(this).attr("fill", "orange")
    })
    .on("drag", function() {
      d3.select(this).attr("cx",d3.event.x)
        .attr("cy", d3.event.y )
    })
    .on("end", function() {
      d3.select(this).attr("fill","steelblue");
    })
  )

<script src="https://d3js.org/d3.v5.js"></script>

in this snippet, if you do not drag from center of circle(like around edge), circle jumps into mouse point, how to make it work with offset ? — crapthings, Mar 09 '19 at 01:11
This is a pretty basic example, the use of a drag subject is needed to avoid that jump, I didn't use it here because the question was about event listeners. See this [example](https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e) for a bit more of a full fledged example or this [answer](https://stackoverflow.com/a/49180422/7106086) for a bit more explanation. The easiest way to implement the subject is to include x,y positional data as x,y properties of the bound datum (as the default subject looks for these properties). — Andrew Reid, Mar 09 '19 at 01:50

Uncaught Error: unknown type: dragend in d3.js v5.4.0

1 Answers1