Animation 在D3中绘制外部加载的svg图形_Animation_Svg_D3.js

Animation 在D3中绘制外部加载的svg图形

animation svg d3.js

Animation 在D3中绘制外部加载的svg图形,animation,svg,d3.js,Animation,Svg,D3.js,我已经从svg文件中加载了一个外部图形，我想在其上进行绘图实验，但不知道如何进行。我的简单d3代码如下： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <body> <script type="t

我已经从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>


d3.xml（“布鲁塞尔.svg”，“图像/svg+xml”，函数（xml）{
document.body.appendChild（xml.documentElement）；
});
svg.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.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”）；}）；

我相信这很简单，但我不知道如何创建实际的圆

谢谢

功能：

d3.xml（“布鲁塞尔.svg”，“图像/svg+xml”，函数（xml）{
document.body.appendChild（xml.documentElement）；
});

异步执行。因此，在执行回调之前执行它后面的代码。第二个问题是，您需要先定义

svg

变量，然后才能对其进行操作

类似于以下的方法应该可以工作：

d3.xml（“布鲁塞尔.svg”，“图像/svg+xml”，函数（xml）{
document.body.appendChild（xml.documentElement）；
var svg=d3.select（'svg'）；
svg.append（“圆”）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.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”）；}）；
});

谢谢，这很有道理。有没有一种简单的方法来读取像csv这样的文件并绘制圆圈。这是一个很大的变化，从这个代码吗？不，这不是一个很大的变化。看一看和相关的例子。这充分回答了你的问题吗？