D3鼠标悬停在本地主机上可以，但在部署站点上不行

D3 mouseover is fine on localhost but not on deploy site

本文关键字：部署 站点 鼠标 主机 D3 悬停      更新时间：2023-09-26

我在localhost上看到了一些D3图，但我不明白为什么其中一个图在部署的站点上略有变化。如果用户将鼠标悬停在位置（行、列）的单元格上，则此页面上的最后一个绘图（Mike Bostock的《悲惨世界》示例中的共现绘图）应突出显示行和列文本标签，但由于某些原因，仅突出显示列文本。

相关鼠标悬停代码如下：

function mouseover(p) {
    d3.selectAll(".row text").classed("active", function(d, i) {
        return i == p.y;
    });
    d3.selectAll(".column text").classed("active", function(d, i) {
        return i == p.x;
    });
}

相关的css在这里：

#cooccurrence text.active {
  fill: red;
}

这里有一个链接到完整的工作代码，因为它存在于网站上。

有人知道为什么鼠标悬停在最后一个绘图中没有将行的文本标签更改为红色吗？我认为一些站点级别的css可能会干扰，但还无法调试原因。如果其他人能就这个问题提供任何见解，我将不胜感激！

错误在这里：

下面的代码返回274个元素，因为您有一些类为row的DOM元素，其中有text DOM元素。因此，索引与其他元素匹配，并使其变为红色

d3.selectAll(".row text").classed("active", function(d, i) {
        return i == p.y;
});

正确的选择器如下所示：

function mouseover(p) {
    d3.selectAll("g .row text").classed("active", function(d, i) {
        return i == p.y;
    });
    d3.selectAll(".column text").classed("active", function(d, i) {
        return i == p.x;
    });
}

希望这能有所帮助！

相关文章：