Question

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

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

每个使用不同的源数据：graph.nodes用于网络图，graph.loc用于散点图。两者都有类“位置”，用于在鼠标悬停期间建立两者之间的连接。 svgs被称为“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

您尚未向text SVG下的mapit元素添加课程。

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

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

1 个答案: