Selecting SVG with D3

Question

I have the following function:

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

  // interesting stuff happens later ...
}

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

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

When I print out svg I expect to see this:

instead, I see the following:

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

.map-wrap is like so:

Answer 1

就像Cyril所说的那样，在更好地调试之后，我意识到在创建svg元素之前确实已经调用了它。