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

Question

我正在尝试创建一个带有散点图、网络图和表格的页面。我能够让鼠标处理在网络图和表格上工作（在 Link D3 的 @Superboggly 的帮助下，在鼠标悬停时使用表格强制布局网络图）。现在我试图让鼠标处理在带有散点图的第二个 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"); 
    });

更新小提琴。