D3, tooltip position, when viewBox is applied
<p>I am creating pie chart.</p>
<p>When hovering segments, I want to display custom html tooltip ...</p>
<p>All the time from the beginning, I was using <code>d3.event.pageX</code> and <code>d3.event.pageY</code> for calculating tooltip locations.</p>
<p>But now I want to display tooltip in the center point of pie segment</p>
<p><a href="https://i.stack.imgur.com/FZlUt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FZlUt.png" alt="enter image description here" /></a></p>
<p>So, I am calculating centroid on hover</p>
<pre><code> var centroid = arcs.pie.centroid(d);
            var left = centroid[0];
            var top = centroid[1];
</code></pre>
<p>and assign tooltip's left , right position accordingly</p>
<pre><code>tooltip.style(&quot;left&quot;, (left) + &quot;px&quot;)
       .style(&quot;top&quot;, (top) + &quot;px&quot;);
</code></pre>
<p>That only works , when the chart size is initial, but I also want the chart to be responsive</p>
<p>so, I have assigned viewbox property on svg</p>
<pre><code> var svg = d3.select(selector)
        .append('svg')
        .attr(&quot;viewBox&quot;, &quot;0 0 &quot; + attrs.svgWidth + &quot; &quot; + attrs.svgHeight)
        .attr(&quot;preserveAspectRatio&quot;, &quot;xMidYMid meet&quot;)
</code></pre>
<p>Here comes the problem:</p>
<p>When resizing window, chart scales accordingly, but tooltip  position is out of segment center.</p>
<p><strong>How can I move this tooltip to the right position?</strong></p>
<p>I am looking &quot;pluginless&quot; solution.</p>
<p>check out <a href="http://codepen.io/bumbeishvili/pen/oYBrZr?editors=1010" rel="nofollow noreferrer">codepen</a></p>