Selecting SVG with D3
<p>I have the following function:</p>

<pre><code>function myfunc(d) {
  var svg = d3.select('.map-wrap svg');
  console.log('svg is:');
  console.log(svg);

  // interesting stuff happens later ...
}
</code></pre>

<p>I call that function on a <code>mouseover</code> event. Here is code where <code>myfunc</code> is supposed to be called.</p>

<pre><code>myChart.width(800)
    .height(800)
    .dimension(xDim)
    .group(xDimGrp)
    .projection(projection)
    .colors(quantize)
  .colorDomain(quantize.domain())
  .colorCalculator(function (d) { return d ? getColorClass(myChart.colors()(d)) : '#ccc'; })
    .overlayGeoJson(map.features, 'states', function (d) {
        return d.properties.state;
    }).on('mouseover', myfunc);
</code></pre>

<p>When I print out <code>svg</code> I expect to see this:</p>

<p><a href="https://i.stack.imgur.com/hCC1J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hCC1J.png" alt="svg object in array"></a></p>

<p>instead, I see the following:</p>

<p><a href="https://i.stack.imgur.com/94Juo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/94Juo.png" alt="svg is null"></a></p>

<p>I see <code>0: null</code> instead of <code>0: svg</code>, why is this happening? How can I select the SVG in a way that will give me what is shown in first picture?</p>

<p><code>.map-wrap</code> is like so:</p>

<p><a href="https://i.stack.imgur.com/6O27s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6O27s.png" alt="map wrapper div"></a></p>