javascript - 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

在 mouseover 处理程序内部，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 的数据绑定和输入、更新、（退出）选择来创建您的图例, 并d在"mouseover"函数中使用来确定正在与哪个图例元素进行交互（而不是在 DOM 元素上使用 id）。