path - 使用d3-tip将SVG路径标题显示为工具提示

path - 使用d3-tip将SVG路径标题显示为工具提示,第1张

我有一个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>

它不起作用。 我该怎么做?

最佳答案:

1 个答案:

答案 0 :(得分:0)

你需要定义svg。 例如:var svg = d3.select(&#39; body&#39;)。select(&#39; svg&#39;);

我正在使用.select()但是&#34;获得多个组选择的唯一方法是[选择] .selectAll&#34;

在你的d3-tip .html()&#39;这个&#39;是一个SVG元素。而不是this.title,请使用this.getAttribute(&#39; title&#39;);

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复