CODEWITHSUNDEEP
javascriptd3.jssvg
Sergey P.
Sergey P.

Reputation: 194

D3js v4. How to determine custom event?

I want to remove svg elements by custom "click + delete" event. I know how to determine click event, and events like ctrlKey, shiftKey, altKey, metaKey. But I want to use other keys. What is the right way to do it?

Upvotes: 0

Views: 318

Answers (1)

Ian
Ian

Reputation: 34549

You're going to need to listen to two different events to achieve this, notably keydown and keyup events. Let's pretend we've got a circle:

const DELETE_KEYCODE = 46;
let deletePressed = false;

d3.select("svg")
  .selectAll("circle")
  .on("keydown", () => { deletePressed = d3.event.keyCode === DELETE_KEYCODE; })
  .on("keyup", () => { deletePressed = false; })
  .on("click", (d, i, elements) => {
      if (deletePressed) {
         d3.select(elements[i]).remove();
      }
  });

Now realistically you probably want keyup to be a bit more intelligent, in case they pressed several keys and didn't keyup the delete! But I'll let you work that bit out.

Upvotes: 2

Related Questions