рисование на внешне загруженном SVG-графике в D3
Я загрузил внешнюю графику из SVG-файла и хочу поэкспериментировать с рисованием, но не могу понять, как это сделать. мой простой код d3 здесь:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.xml("brussels.svg", "image/svg+xml", function(xml) {
document.body.appendChild(xml.documentElement);
});
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");});
</script>
</body>
</html>
Я уверен, что это что-то простое, но я не уверен, как создать реальный круг.
Спасибо!