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

Question

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

UI

的图片

代码如下：

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

    segmentAxis.title="Tooltip";

Answer 1

正如罗伯特所说，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");

Answer 2

我在 Paul LeBeau 回答的帮助下解决了我的问题：

这是屏幕截图

代码如下：

        var toolTip=d3.select("#dvAllProfiles").select("svg")
        .append("svg:title")
        .attr("class", "tooltip")
        .style("visibility", "hidden")
        .text("Test Tooltip");

        self.pcz.svg.selectAll(".dimension").data([0]).selectAll(".tick")
        .selectAll("*")
        .style("font-size", "12px").style("transform", "rotate(340deg)")
        .on("mouseover", function(d) {
            return toolTip.style("visibility", "visible").style("top", event.pageY+"px").style("left",event.pageX+"px").text(d);
        })
        .on("mouseleave", function(d) {
            return toolTip.style("visibility", "hidden")  
        });

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

How to add tooltip to an svg graphics element using javascript

javascript

svg

canvas

tooltip

d3.js