顯示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尖端的D3 tootip。 我試過類似下面的東西：

<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'）;

我使用。選擇（），但「唯一的方法可以讓你獲得與多個組的選擇是[選擇] .selectAll」

在你的D3尖的.html（）「這」是一個SVG元素。使用this.getAttribute（'title'）;而不是this.title。