Show SVG path titles as tooltips using d3-tip -
i have svg element looks 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 view title of each path d3 tootip using d3 tip. tried 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 it?
you need define svg. example: var svg=d3.select('body').select('svg');
i using .select() "the way obtain selection multiple groups [selection].selectall"
in d3-tip .html() 'this' svg element. instead of this.title, use this.getattribute('title');
Comments
Post a Comment