d3.js - 将鼠标悬停在 D3 中第二个 svg 的散点图中

Question

我正在尝试创建一个包含散点图、网络图和表格的页面。我能够让鼠标处理在网络图和表格上工作(在 @Superboggly Link D3 force layout network diagram with table on mouseover 的帮助下)。现在我试图让鼠标处理在带有散点图的第二个 svg 上工作，我认为我弄乱了引用。

var mapit = svg2.selectAll("maprect")
    .data(graph.nodes)
    .enter().append("rect")
    .attr("x", function(d) { return xScale(d.long); })
    .attr("y", function(d) { return yScale(d.lat); })
    .attr("height", 20)
    .attr("width", 20)
    .attr("fill", "cyan")
    // This mouseover doesn't work, what am I missing?
    .on("mouseover", function(d) { 
        d3.select(this).select("rect").style("fill", "orange"); 
        })
    .on("mouseout",  function(d) { 
        d3.select(this).select("rect").style("fill", "cyan"); 
        });

我是 D3 和 JavaScript 的新手，并且对... mapit、svg2、maprect、 graph.nodes，rect，...我从其他人的示例中拼凑而成。有什么建议吗？

该示例发布为 jsFiddle .

Answer 1

你们离得太近了!只需删除函数中的 .select("rect") 即可:

.on("mouseover", function(d) { 
    d3.select(this).style("fill", "orange"); 
    })
.on("mouseout",  function(d) { 
    d3.select(this).style("fill", "cyan"); 
    });

updated fiddle .