0

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

我有两个 svg 元素，一个是网络图（带有节点和链接），一个是散点图（带有纬度/经度位置）。网络图中的节点和散点图矩阵中的矩形都在 svg 组中具有与之关联的文本元素。我需要区分鼠标悬停事件中的两个文本元素，但我不知道该怎么做。

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

我已经发布了一个 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");

有什么建议么？

4

1 回答 1

2

您尚未向SVGtext下的元素添加类。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
于 2013-05-13T20:57:12.720 回答