Show SVG названия путь в подсказках с использованием d3-наконечник

Question

У меня есть элемент, который SVG выглядит следующим образом:

<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> 

Я хотел бы, чтобы просмотреть название каждого пути как d3 tootip с использованием d3 наконечника. я пытался что-то вроде ниже:

<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> 

Это не работает. Как это сделать?

Answer 1

Вам необходимо определить svg. Пример: var svg = d3.select ('body'). Select ('svg');

Я использую .select(), но «Единственный способ для вас, чтобы получить выбор с несколькими группами [выбор] .selectAll»

В вашем Д3-наконечник .html() «это» является элемент SVG. Вместо this.title используйте this.getAttribute ('title');