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

我不熟悉D3和js，我不知道如何在第二个svg元素中引用第二个文本元素（不确定元素是否是正确的术语）

我有两个svg元素，一个是网络图（带有节点和链接），另一个是散点图（带有lat/long位置）。网络图中的节点和散点图矩阵中的矩形都有svg组中与其关联的文本元素。我需要区分mouseover事件中的两个文本元素，但我不知道如何做到这一点

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

我已经发布了一个示例作为JSFIDLE。例如，当我将鼠标移到网络图（Sally）中的一个节点上时，我想放大散点图中相应位置的文本（Toronton）。下面是一段代码

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");

---

有什么建议吗？

您没有在

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

mapit.append（“文本”）
.attr（“x”，函数（d）{return xScale（d.long）；}）
.attr（“y”，函数（d）{返回yScale（d.lat）-5；}）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“12px”）
.attr（“填充”、“黑色”）
.text（函数（d）{返回d.location；}）
.attr（“类”，函数（d）{return d.location；}）；//谢谢成功了。有了这个修复，我也可以修复其他部分。这是最新消息。