1

如何向使用 svg 路径生成的条形图中的每个条形添加工具提示...是否可以使用引导工具提示...？我在下面提供了我的 svg 路径

 <path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100"/>

我在下面的小提琴http://jsfiddle.net/mfAc4/6/中提供了 svg 生成的条形图...如何向每个条形添加工具提示？

任何建议，将不胜感激。

4

2 回答 2

2

Not sure what you mean by bootstrap, but most UAs will turn a title element child into a tooltip. E.g.

<path class="foreground bar" clip-path="url(#clip 0)" d="M36,100V68h20V100M108,100V29h20V100M180,100V71h20V100M252,100V-4h20V100M324,100V87h20V100">
    <title>tooltip text</title>
</path>
于 2012-11-02T13:17:33.257 回答
1

看看：http ://bl.ocks.org/2973775

请注意，在您的 jsFiddle 中，您实际上并没有使用 d3。但是您可以轻松添加它以获得工具提示，请参见此处：

var svg = d3.select("svg").attr("width", 400).attr("height", 400);

var vis = svg.append('g');

var txt = vis.append('text')
    .attr({ transform: 'translate(5,20)', fill:'red'})
    .text("Node Info");

d3.selectAll('.bar')
    .on("mouseover", function(d) { 
        var mousePos = d3.mouse(this);
        txt.text(mousePos);
        txt.attr({transform: 'translate(' + mousePos + ')'});
    })
    .on("mousemove", function(d) { 
        var mousePos = d3.mouse(this);
        txt.attr({transform: 'translate(' + mousePos + ')'}); 
    });

​ 要确定哪个栏，您必须查看鼠标 x 位置。您应该考虑为此使用d3 比例（它将在两个方向上映射 - 检查反转功能）。

于 2012-11-07T20:18:47.863 回答