title: Zoom to bounding box of path on externally loaded svg using D3
body: <p>I'm using D3 to load an external SVG map that isn't using topojson (as the map was hand created and non a traditional map). I'm trying to target the elements <code>#lines path</code> so that when clicked, each path zooms and fills its bounding box. </p>
  
  <p>I'm trying to use <a href="https://observablehq.com/@d3/zoom-to-bounding-box" rel="nofollow noreferrer">this example</a> from Mike Bostock but can't figure out how to replicate it with the data that isn't using topojson. See this line: </p>
  
  <p><code>.data(topojson.feature(us, us.objects.states).features)</code></p>
  
  <p>It this even possible? </p>
  
  <p>Here is the code I'm using to load the SVG. </p>
  
  <pre class="lang-js prettyprint-override"><code>var mapContainer = $('.map');
  
  d3.xml("../assets/subwaymap.svg", function(error, subwayMap) {
    if (error) throw error;
    $('.map').append(subwayMap.documentElement)
  </code></pre>
  
  <p>I've tried getting the bounding box using <code>.getBBOX</code> but am confused at how it connects. It seems like all examples I've seen use <code>d3.create("svg")</code> and then tack all the functionality within that but since my data is already appended to the DOM, would this be necessary? Fairly new to D3. Thanks!</p>