0

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

我确信这很简单，但我不确定如何创建实际的圆圈。

谢谢！

4

1 回答 1

0

功能：

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

异步执行。因此，它后面的代码在回调执行之前执行。第二个问题是您需要先定义svg变量，然后才能对其进行操作。

像下面这样的东西应该可以工作：

 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");});
 });
于 2013-11-09T22:38:49.333 回答