为 svg 中的行添加悬停工具提示
Posted
技术标签:
【中文标题】为 svg 中的行添加悬停工具提示【英文标题】：Add hover tooltip for line in svg 【发布时间】：2016-02-05 09:54:37 【问题描述】：我正在尝试为 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>
【问题讨论】：
【参考方案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 中的行添加悬停工具提示的主要内容，如果未能解决你的问题，请参考以下文章