在SVG中为行添加悬停工具提示

garson 发表于 Dev

加森

我正在尝试为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>

罗伯特·朗森

使用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");

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。