Question

我正在尝试在SVG中为两行添加简单的悬停文本。我把它作为“标题”包含在下面的代码中，但当我将鼠标悬停在任意一行上时没有任何反应。因为它们交叉，所以当你将鼠标悬停在交叉路口时，我并不特别在意它。

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

<head>
  <meta charset="utf-8" />
  <script data-require="d3@3.5.3" 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>

Answer 1

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

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

1 个答案: