まくろぐ
更新:
作成:

D3.js は主に SVG の描画に使われるライブラリですが、一般的な DOM 要素のイベントをハンドルするためにも使用できます。 ここでは、ボタンやテキスト入力要素を D3.js で扱う例を示します。

次の例では、ボタン (button) をクリックしたときに、その独自属性 (data-color) にセットされた値を取り出しています。 この仕組みを利用すれば、ボタンを押したときに SVG の表示内容を切り替えるといったことが可能です。

ボタンを押してみて

<div id="buttonContainer">
  <button data-color="g">Green</button>
  <button data-color="y">Yellow</button>
  <button data-color="r">Red</button>
  <p id="message">ボタンを押してみて</p>
</div>

<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

d3.selectAll("#buttonContainer button")
  .on("click", function() {
    const color = d3.select(this).attr("data-color")
    d3.select("#message").text(`選択したカラーコード = ${color}`)
  })
</script>

上記の例では、click ハンドラーの中で、d3.select() を使って D3 セレクションオブジェクトを生成していますが、次のように従来の DOM API だけを使って記述することも可能です。

.on("click", (event) => {
  const color = event.target.dataset["color"]  // button の data-color の値を取得
  document.querySelector("#message").innerText = `選択したカラーコード = ${color}`
})

d3.select() を使っちゃった方が全体的にシンプルなコードになりますね。 実行効率は多少落ちるのかもしれませんが。

関連記事

まくろぐ
サイトマップまくへのメッセージ