当我使用D3鼠标滑过第二个SVG的元素时，如何更改SVG中元素的属性

我有两个SVG，并且想改变另一个SVG的元素的一个SVG的元素的属性。目前，我正在努力适当选择元素（在代码下面更详细地解释）。这里是的jsfiddle它：jsfiddle这里是整个代码：当我使用D3鼠标滑过第二个SVG的元素时，如何更改SVG中元素的属性

<!DOCTYPE html> 
<html> 
    <head> 
     <title>two svgs</title> 
    <style> 
     .sweepline{ 
      stroke:blue; 
      stroke-width:3; 
     } 
     #tooltip { 
     position: absolute; 
     width: 200px; 
     height: auto; 
     padding: 10px; 
     background-color: white; 
     -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
     border-radius: 10px; 
     -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     pointer-events: none; 
     } 

     #tooltip.hidden { 
       display: none; 
     } 

     #tooltip p { 
       margin: 0; 
       font-family: sans-serif; 
       font-size: 16px; 
       line-height: 20px; 
     } 
    </style> 
    </head> 
    <body> 
     <div id = 'lines'></div> 
     <div id = 'chart'></div> 
     <div id="tooltip" class="hidden"> 
     <p><strong>Name of line</strong></p> 
     <p>that work's: <span id="nameLine">100</span></p> 
     </div> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
     <script> 
     var width = 200 
     var height = 200 
     //names of the lines 
     var names = ['aaa', 'bbb', 'ccc'] 
     //coordinates of the lines 
     var x1Val = [5,10,25] 
     var x2Val = [50,40,90] 
     var y1Val = [5,25,150] 
     var y2Val = [5,100,150] 
     //create SVG 
     var mySvg = d3.select("#lines").append("svg") 
            .attr("width", width) 
            .attr("height", height); 
     //add all the lines to the svg 
     for (i=0; i < x1Val.length; i++){ 
      mySvg.append("line") 
          .attr("x1", x1Val[i]) 
          .attr("y1", y1Val[i]) 
          .attr("x2", x2Val[i]) 
          .attr("y2", y2Val[i]) 
          .attr("id", names[i]) 
          .attr("class","sweepline") 
          //when 'touched', change color of line and add tooltip with name of line 
          .on("mouseover", function(d) { 
           d3.select(this).attr("class","sweepline").style("stroke", "red"); 
           var xPosition = parseFloat(d3.select(this).attr("x1")) + 100; 
           var yPosition = parseFloat(d3.select(this).attr("y1")) + 50; 

           //Update the tooltip position and value 
           d3.select("#tooltip") 
            .style("left", xPosition + "px") 
            .style("top", yPosition + "px") 
            .select("#nameLine") 
            .text(d3.select(this).attr("id")); 

           //Show the tooltip 
           d3.select("#tooltip").classed("hidden", false); 
           }) 
          //change the color back and hide tooltip  
          .on("mouseout", function() { 

           d3.select(this).attr("class","sweepline").style("stroke", "blue"); 
           d3.select("#tooltip").classed("hidden", true); 
          }) 
     } 
     //create second tooltip 
     var mySvg2 = d3.select("#chart").append("svg") 
            .attr("width", width) 
            .attr("height", height); 
     mySvg2.append('circle') 
       .attr("cx", 30) 
       .attr("cy", 30) 
       .attr("r", 20) 
       .on("mouseover", function(d) { 
        d3.select(this).style("fill", "blue"); 
        //d3.select('#lines').select(whatGoesInHere?).attr("class", "sweepline").style("stroke", "red"); 
       }); 

     </script> 
    </body> 
</html>

所以首先我创建了一个名为SVG和mySvg添加使用x1Val，x2Val，分别为y1Val和y2Val，提供了一些坐标系。这个SVG进入div，调用lines。对于每一行，还有一个tooltip，当我mouseover显示行的名称。所有的工作正常。

然后，我创建了第二个名为mySvg2的SVG，其中只包含一个圆圈并进入名为chart的div。当我mouseover这个圆圈，我想改变mySvg中的线的颜色为红色，但是，我没有正确选择这些线。我尝试了几个版本：

d3.select('#lines').select(whatGoesInHere?).attr("class", "sweepline").style("stroke", "red");

但我所有的方法都失败了。

我的问题是：如何修改我的代码，以改变mySvg中的一条或所有行的颜色，当我在mySvg2的圆圈mouseover？

来源

2015-08-28 Cleb

只需选择其中的内部#lines行元素：

d3.select('#lines').selectAll("line").attr("class", "sweepline").style("stroke", "red");

我已经更新您的JSFiddle。

来源

2015-08-28 13:57:16 altocumulus

非常好！这样做的工作！我现在赞成它，并在稍后接受它。只是出于兴趣：其他代码是否正确？我不是D3专家，只是想知道是否有更明智的做法来做某些事情（例如避免for循环）。 – Cleb

你很少遇到纯D3代码中的for循环;总是会引起怀疑。要走的路是通过数据绑定和选择。那里有很多关于这些主题的教程。关于[*选择如何工作*]（http://bost.ocks.org/mike/selection/）的文章以及与其中相关的参考文献将对此提供透彻的理解。我更新了你的[JSFiddle]（http://jsfiddle.net/5w4rq6vz/18/）以进行更多的D3行插入。如果遇到更多问题，请张贴另一个问题以获得帮助。 – altocumulus

非常好，谢谢你的帮助，因为我还在学习D3！是的，在接下来的几周内可能会出现更多的问题，所以我希望你能经常上网;） – Cleb

当我使用D3鼠标滑过第二个SVG的元素时，如何更改SVG中元素的属性

回答

相关问题