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分配ID，请在其上调用.attr('id', 'some_id')。

但是，如果你处于一个你还没有注意到你的帖子的阶段（不管你的帖子是什么），那么考虑使用d3的数据绑定和输入，更新，（退出）选择以创建图例，并使用d函数中的"mouseover"来确定与之交互的图例元素（而不是在DOM元素上使用ID）。