D3.js でマウスイベントを扱う (click, mousemove, mouseover, mouseout)

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

svg.on("click", (event) => {
  const [x, y] = d3.pointer(event)
  svg.append("circle")
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 10)
    .attr("fill", "deeppink")
    .style("fill-opacity", 0.5)
})
</script>

<svg id="svg-mousemove" width="200" height="100" />
<script>
const svg = d3.select("#svg-mousemove");

// 座標値を表示するための text 要素を追加しておく
const text = svg.append("text")
  .attr("x", "50%")
  .attr("y", "50%")
  .attr("text-anchor", "middle")  // 水平方向のアンカーポイントを中央に
  .attr("dominant-baseline", "middle")  // 垂直方向のベースラインを中央に
  .text("x=0, y=0")

// カーソル位置を表示する circle 要素を追加しておく
const circle = svg.append("circle")
  .attr("r", 6)
  .attr("fill", "red")

// mousemove イベントをハンドル
svg.on("mousemove", (event) => {
  const [x, y] = d3.pointer(event)
  text.text(`x=${Math.floor(x)}, y=${Math.floor(y)}`)
  circle.attr("cx", x).attr("cy", y)
})
</script>

<svg id="svg-mouseover" width="200" height="100" />
<script>
const svg = d3.select("#svg-mouseover");

// 矩形を追加
const rect = svg.append("rect")
  .attr("x", 35)
  .attr("y", 25)
  .attr("width", 50)
  .attr("height", 50)
  .attr("stroke", "gray") // 枠線の色
  .attr("fill", "transparent") // 塗りつぶしの色
  .on("mouseover", handleMouseOver)
  .on("mouseout", handleMouseOut)

// 円を追加
const circle = svg.append("circle")
  .attr("cx", 140)
  .attr("cy", 50)
  .attr("r", 25)
  .attr("stroke", "gray") // 枠線の色
  .attr("fill", "transparent") // 塗りつぶしの色
  .on("mouseover", handleMouseOver)
  .on("mouseout", handleMouseOut)

// 要素にカーソルが入ったとき
function handleMouseOver(event) {
  d3.select(event.currentTarget).attr("fill", "cyan")
  // d3.select(this).attr("fill", "cyan")
}

// 要素からカーソルが出たとき
function handleMouseOut(event) {
  d3.select(event.currentTarget).attr("fill", "transparent")
  // d3.select(this).attr("fill", "transparent")
}
</script>