2016-04-02 4 views
0

私はSVGをHTMLボディのdiv内に持っていますが、このSVGに「rect」を追加するのにd3を使用していますが、rectは生成されません。ここd3を使用してSVGにrectを追加できません

<svg id="svg_container" width="1000px" height="800px"</svg> 

<script> 
    //Select the SVG Container 
     var svgContainer = d3.select("#svg_container"); 
     //Draw the Rectangle 
     var rectangle = svgContainer.append("rect").attr("x", 10).attr("y", 10).attr("width", 50).attr("height", 100); 

はplunkrが追加された - https://embed.plnkr.co/aNW8NtiRfS6FkSQMHtkB/

"RECT" を生成する際に任意の助けが理解されるであろう。

答えて

1

ライブラリをロードした後にscript.jsをロードする必要があります。

http://plnkr.co/edit/8qxmu5KpPZroGhB1odGK?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="MyApp"> 
     <div id="container" ng-controller="driversController"> 
      <div id="ElementPane" class="container">  
       <svg id="svg_container" width="1000px" height="800px"></svg> 
      </div> 
     </div> 
    </body> 
</html>