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.

Answer 1

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>