d3.js の散布図でのクリックイベントの設定方法

d3.js の散布図でクリックイベントを設定する方法のメモ。

「d3.js の散布図でマウスオーバーでメッセージを表示」の例で、以下のように .on("click", function (e) {}) を指定するとクリックイベントを処理することができます。

svg.append("g")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function (d) { return xScale(d[0]); })
.attr("cy", function (d) { return yScale(d[1]); })
.attr("r", 10)
.attr("fill", function (d) {
   return "rgba(0, 0, " + Math.round(colorScale(d[2])) + ", 0.8)";
})
.on("mouseover", function (e) {
    const d = e.target.__data__;
    console.log(e);
    tooltip
    .style("left", e.x + 30 + 'px')
    .style("top", e.y + 'px')
    .html(
        "id: " + d[3] + ""
        + "[" + d[0] + ", " + d[1] + "]" + ""
        + "value: " + d[2]
    )
    .style("opacity", 1)
    ;
})
.on("mouseout", function (e) {
    tooltip
    .style("opacity", 0)
    ;
})
.on("click", function (e) {
    const d = e.target.__data__;
    console.log(e);
})
;