如何在第二个svg中引用第二个文本元素

Question

我是D3和js的新手，我无法弄清楚如何在第二个文本元素中引用第二个文本元素（不确定元素是否是正确的术语）第二个svg元素。

我有两个svg元素，一个是网络图（带有节点和链接），另一个是散点图（带有经纬度位置）。网络图中的节点和散点图矩阵中的矩形在svg组中都具有与它们相关联的文本元素。我需要区分mouseover事件中的两个文本元素，但我无法弄清楚如何去做。

不同的源数据用于每个：网络图graph.nodes，散点图graph.locs。两者都有类“位置”，用于在鼠标悬停期间建立两者之间的连接。 svg被称为“svg”和“svg2”，但这些组都被称为“g”，并且文本元素都被称为“文本”。

我已经发布了一个例子作为jsFiddle，http://jsfiddle.net/JVAdams/LXFMx/。例如，当我将鼠标悬停在网络图（Sally）中的一个节点上时，我想要扩大散点图中相应位置的文本（TorontoON）。这里是

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", function(d) { return "node " + d.name + " " + d.location; }) 
    .call(force.drag) 
    .on("mouseover", function(d) { 
     d3.select(this).select("circle").style("stroke-width", 6); 
     d3.select(this).select("circle").style("stroke", "orange"); 
     d3.select(this).select("text").style("font", "20px sans-serif"); 
     d3.selectAll("rect." + d.location).style("stroke-width", 6); 
     d3.selectAll("rect." + d.location).style("stroke", "orange"); 
    // this line doesn't work 
    d3.selectAll("text." + d.location).style("font", "20px sans-serif"); 
     d3.selectAll("tr." + d.name).style("background-color", "orange"); 
     }) 
    .on("mouseout", function(d) { 
     d3.select(this).select("circle").style("stroke-width", 1.5); 
     d3.select(this).select("circle").style("stroke", "gray"); 
     d3.select(this).select("text").style("font", "12px sans-serif"); 
     d3.selectAll("rect." + d.location).style("stroke-width", 1.5); 
     d3.selectAll("rect." + d.location).style("stroke", "black"); 
     d3.selectAll("text." + d.location).style("font", "12px sans-serif"); 
     d3.selectAll("tr." + d.name).style("background-color", "white"); 
     }); 

在地方，我想要什么，不办行的，我已经尝试了多种方法来正确引用散点图的文本元素的代码片段，都没有成功：

d3.selectAll("mapit.text." + d.location).style("font", "20px sans-serif"); 
    d3.selectAll("g.text." + d.location).style("font", "20px sans-serif"); 
    d3.selectAll("svg2.text." + d.location).style("font", "20px sans-serif"); 
    d3.selectAll("svg2.g.text." + d.location).style("font", "20px sans-serif"); 

有什么建议吗？

Answer 1

您还没有在mapit SVG下的text元素中添加类。

mapit.append("text") 
    .attr("x", function(d) { return xScale(d.long); }) 
    .attr("y", function(d) { return yScale(d.lat) -5; }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "12px") 
    .attr("fill", "black") 
    .text(function(d) { return d.location; }) 
    .attr("class", function(d) { return d.location ;}); // <<< Add this line