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

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