當我使用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中元素的屬性

回答

相關問題