CODEWITHSUNDEEP
javascriptd3.jsdrag
cri_pava
cri_pava

Reputation: 180

dragend with d3.JS

I'm just messing around with code that I found on the various examples online. Everything works well so far except that I can't fire the drag end event. At the moment I'm just trying to print 'end' on the console but nothing seems to work.

  const drag_handler = d3
    .drag()
    .on("start", drag_start)
    .on("drag", drag_drag)
    .on("end", drag_end);

  function drag_start(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
    event.on("end", console.log("start"));
  }

  function drag_drag(event, d) {
    d.fx = event.x;
    d.fy = event.y;
    event.on("end", console.log("drag"));
  }

  function drag_end(event, d) {
    event.on("end", console.log("end"));
    event.on("start", console.log("end"));
    console.log("end");

    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  drag_handler(d3.select("circle"));

Here is a pen with the full code

Upvotes: 1

Views: 159

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

The Simple Solution

Currently you have three drag functions (I've removed everything except the logging):

  function drag_start(event, d) {
    event.on("end", console.log("start"));
  }

  function drag_drag(event, d) {
    event.on("end", console.log("drag"));
  }

  function drag_end(event, d) {
    event.on("end", console.log("end"));
    event.on("start", console.log("end"));
    console.log("end");
  }

If you merely want to log start/end/drag, you should be using:

  function drag_start(event, d) {
    console.log("start");
  }

  function drag_drag(event, d) {
    console.log("drag");
  }

  function drag_end(event, d) {
    console.log("end");
  }

Why you your code doesn't work as expected:

Event.on

By using event.on() you adding a new, temporary event listener to the end event:

Changes to registered listeners via drag.on during a drag gesture do not affect the current drag gesture. Instead, you must use event.on, which also allows you to register temporary event listeners for the current drag gesture. (docs)

This overwrites the original end event because you can only have one listener for each of start/end/drag unless you name the listeners.

Generally speaking, there are limited cases where you'd want to use event.on - it's not clear why you would want it here.

Passing a function to .on()

In using event.on you aren't actually passing any function to it, you are passing the return value of console.log("string") - which is undefined. For example, to get the event listening function you can use:

 console.log(event.on("end"));

If you add this to your drag function, you'll see it returns undefined.

Ultimately what you are doing is executing console.log() which logs a value and then assigning undefined as the event listener function. As you have replaced your original event listening function with nothing, when the drag end event happens, nothing happens.

If you really want to simply console log something here, you could use:

event.on("end", function() {
     console.log("end")
});

Here we pass a function to .on() instead of undefined. See also here.

However, it is not clear why you would need to use event.on() if you originally just set the drag end event to use

 function drag_end() {
  console.log("end");
 })

As in the simple solution above.

Upvotes: 1

Related Questions