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);
 });

非同期に実行されます。したがって、それに続くコードは、コールバックが実行される前に実行されます。2 つ目の問題は、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 に答える