在svg中添加懸停工具提示行

我想在SVG中爲兩行添加簡單的懸停文本。我在下面的代碼中將它作爲'標題'包含進來，但是當我將鼠標懸停在任意一行上時，沒有任何反應。由於它們交叉，所以當你將鼠標懸停在十字路口上時，我不會特別在意它說的是什麼。在svg中添加懸停工具提示行

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
    <style type="text/css"> 
    </style> 
</head> 

<body> 
    <script type="text/javascript"> 
    //Width and height 
    var w = 500; 
    var h = 300; 
    var padding = 30; 


    //Create SVG element 
    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", w) 
     .attr("height", h) 
     .attr("background-color", "green") 

     svg.append("rect") 
     .attr("width", w) 
     .attr("height", h) 
     .attr("fill", "green"); 

     svg.append("line") 
     .attr("x1", 30) 
     .attr("y1", 40) 
     .attr("x2", 80) 
     .attr("y2", 90) 
     .attr("stroke", "blue") 
     .attr("stroke-width", 2) 
     .attr("title", "This is a blue line"); 

     svg.append("line") 
     .attr("x1", 30) 
     .attr("y1", 90) 
     .attr("x2", 80) 
     .attr("y2", 40) 
     .attr("stroke", "red") 
     .attr("stroke-width", 2) 
     .attr("title", "This is a red line"); 

    </script> 
</body> 

</html>

來源

2015-11-04 garson

有了SVG，你想要一個標題子元素，而不是標題屬性。

svg.append("line") 
    .attr("x1", 30) 
    .attr("y1", 40) 
    .attr("x2", 80) 
    .attr("y2", 90) 
    .attr("stroke", "blue") 
    .attr("stroke-width", 2) 
    .append("title").text("This is a blue line");

來源

2015-11-04 18:57:21

謝謝！當他們被盤旋時，是否有一種簡單的方法可以使線條變成「流行」或「發光」？如果您認爲這更合適，我也可以將其作爲單獨的問題發佈。再次感謝你 – garson

沒關係，我想通過在懸停上添加不透明類來解決這個問題。再次感謝！ – garson

在svg中添加懸停工具提示行

回答

相關問題