score:0

Accepted answer

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!


Related Query

More Query from same tag