D3 将鼠标悬停在图例上，如何确定 ID

Question

我试图确定当我将鼠标悬停在某个图例项上时，我怎么知道我将鼠标悬停在哪一个图例项上。

// draw legend colored rectangles
legend.append("rect")
    .attr("x", width + 170)
    .attr("width", 18)
    .attr("height", 18)
    .on("mouseover", function(d) {
    })
    .style("fill", color);

现在，图例中有 3 个矩形。如何获取悬停在上面的矩形的 ID？

Answer 1

在鼠标悬停处理程序中，this是触发事件的 DOM 元素。所以你可以做一些类似的事情

.on("mouseover", function(d) {
    d3.select(this).attr('id');// presumes that <rect> has an id!
})

要将 id 分配给 rect，请对其调用.attr('id', 'some_id')。

但是，如果您正处于矩形上还没有 id 的阶段（尽管您的帖子标题是什么），请考虑使用 d3 的数据绑定和输入、更新、（退出）选择来创建图例，并在 "mouseover" 函数中使用 d 来确定正在与哪个图例元素交互（而不是在 DOM 元素上使用 ID）。