javascript - 如何使用 javascript 将工具提示添加到 svg 图形元素

Question

我有一个 d3.parcoords 图表，想要为图表的第一个轴添加工具提示。我正在检索第一个轴 DOM 元素并向其添加 title 属性以使其作为其工具提示。没有成功!

用户界面图像

这里是代码:

    var segmentAxis = self.pcz.svg.selectAll(".dimension .axis")[0][0];

    segmentAxis.title="Tooltip";

Answer 1

正如 Robert 所说，SVG 不使用 title属性。它有一个<title>元素代替。

https://www.w3.org/TR/SVG11/single-page.html#struct-DescriptionAndTitleElements

如果您想向 SVG 组添加工具提示，则需要创建 <title>您的群组的元素。

<g>
  <title>Your tooltip here</title>
  ... other elements...
</g>

D3 代码将如下所示:

d3.selectAll('.dimension .axis')[0].append("svg:title").text("Your tooltip here");