D3js v4。如何确定自定义事件？

Posted 2021-03-30

我想通过自定义“点击+删除”事件删除svg元素。我知道如何确定click事件，以及ctrlKey，shiftKey，altKey，metaKey等事件。但我想使用其他键。做正确的方法是什么？

答案

你将需要听两个不同的事件来实现这一点，特别是keydown和keyup事件。让我们假装我们有一个圆圈：

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

现在实际上你可能希望keyup更加智能，如果他们按下几个键并且没有keyup删除！但我会让你解决这个问题。