Geek Answers Handbook

Adding a tooltip to a histogram generated using the svg path

how can I add a tooltip for each bar in a barchart generated using the svg path ... Can I use a tooltip ...? I provided my svg path below

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

I provided the svg string script below the http://jsfiddle.net/mfAc4/6/ ... script. How do I add a tooltip to each bar?

Any suggestions would be appreciated.

+1
source share
2 answers

Not sure what you mean by bootstrap, but most UAs will turn the element's child into a tooltip. For instance.

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

Take a look: http://bl.ocks.org/2973775

Note that in jsFiddle you are not actually using d3. But you can easily add it to get a tooltip to see here :

 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 + ')'}); });

To find out which bar you will have to look at the mouse position x. You should consider using d3 scale for this (it will appear in both directions - check the invert function).

+1
source

More articles:


All Articles