score:0

Accepted answer

The function:

 d3.xml("brussels.svg", "image/svg+xml", function(xml) {
   document.body.appendChild(xml.documentElement);
 });

executes asynchronously. Hence, the code following it is executed before the callback is executed. The second problem is that you need to define the svg variable before you can operate on it.

Something like the following should work:

 d3.xml("brussels.svg", "image/svg+xml", function(xml) {
   document.body.appendChild(xml.documentElement);

   var svg = d3.select('svg');

   svg.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");});
 });

Related Query

More Query from same tag