Question

我正在尝试使用散点图，网络图和表创建页面。我能够在网络图和表格上进行鼠标操作（在Link D3 force layout network diagram with table on mouseover的@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，{{1我是从其他人的例子中拼凑而成的。有什么建议吗？

示例发布为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

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

1 个答案: