我无法选择已从外部加载到D3中的SVG的元素

Question

I'm trying to load an external SVG into D3 and then be able to select and manipulate using D3 functions. I was able to get it loaded on the page with the following code:

  d3.xml("external.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);                        
  })

However, when I try to use d3.select, none of the functions work. When I console.log the selected element, it shows an empty array.

Answer 1

Based on the plunkr you provided, in order for your events to work properly, you need to add them after d3 has loaded the svg. So, instead of this:

d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);
  })

  // this runs before the above finishes, so d3 won't find something to select
  d3.select("#K05")
    .on("mouseover", function(d) {
      console.log(d)
      console.log('hello')
    })

   console.log(d3.select("#K05"))

You need to move the select like this:

  d3.xml("DCMetroMap.svg").mimeType("image/svg+xml").get(function(error, xml) {
    if (error) throw error;
    // load the document 
    document.body.appendChild(xml.documentElement);

    //then add the events
    d3.select("#K05")
    .on("mouseover", function(d) {
      console.log(d) // d will be null here
      console.log('hello')
      alert("Hi!")

    })

  })

Like this: http://plnkr.co/edit/WbYyBKtzZe6MtKGbjzw9?p=preview

In other words, anything you do, you must put it after document.body.appendChild(xml.documentElement);

Hope this helps! Good luck!