Show SVG path titles as tooltips using d3-tip

Question

I have an svg element which looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 200 950 1100"  style="fill:black" stroke="grey">
<g title="Bihar" style="fill:aquamarine">
<path title="Paschim Champaran" d="M 582.47648,570. /*more*/ 582.47648,570.42447 z" />
<path title="Purba Champaran" d="M 594.0844,580.42604 /*more*/ L 594.0844,580.42604 z" />
</g> </svg>

I would like to view the title of each path as a d3 tootip using d3 tip. I tried something like the below:

<script>
var tip = d3.tip().html(function(){return this.title;});
svg.call(tip);
d3.select('svg').select('g').select('path').on('mouseover',tip.show).on('mouseout',tip.hide);
</script>

It doesn't work . How do I do it?

Answer 1

You need to define svg. Example: var svg=d3.select('body').select('svg');

I am using .select() but "The only way for you to obtain a selection with multiple groups is [selection].selectAll"

In your the d3-tip .html() 'this' is an SVG element. Instead of this.title, use this.getAttribute('title');