D3.js でキーボードイベントを扱う (keydown)

<svg id="svg-z5a3fzu" width="200" height="100"></svg>
<script>
const svg = d3.select("#svg-z5a3fzu");  // D3 Selection オブジェクトを取得

svg
  .on("keydown", handleKeyDown)  // keydown イベントのハンドラーを設定
  .attr("tabindex", 0)  // フォーカスを当てられるようにする
  // .node().focus()  // 自動でフォーカスする場合

// カーソルキーで動かせる丸を表示
const circle = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 50)
  .attr("r", 10)
  .attr("fill", "dodgerblue")

function handleKeyDown(event) {
  switch (event.code) {
    case "ArrowLeft":
      circle.attr("cx", +circle.attr("cx") - 5)
      event.preventDefault();
      break;
    case "ArrowRight":
      circle.attr("cx", +circle.attr("cx") + 5)
      event.preventDefault();
      break;
    case "ArrowUp":
      circle.attr("cy", +circle.attr("cy") - 5)
      event.preventDefault();
      break;
    case "ArrowDown":
      circle.attr("cy", +circle.attr("cy") + 5)
      event.preventDefault();
      break;
  }
}
</script>