javascript - 无法使用 d3 将矩形附加到 SVG

标签 javascript angularjs d3.js svg

我在 html 正文的 div 中有一个 SVG,并且我使用 d3 向该 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);

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

这里添加了一个 plunkr - https://embed.plnkr.co/aNW8NtiRfS6FkSQMHtkB/

任何生成“矩形”的帮助将不胜感激。

最佳答案

您需要在加载库后加载 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>

关于javascript - 无法使用 d3 将矩形附加到 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36369574/

相关文章:

javascript - 如何管理 Django 模板中包含的 Javascript 文件

javascript - 即使 Angular 中没有数据,也会显示分页

AngularJS 在 Application .run 方法上设置变量。稍后在 Controller 、服务、html中使用

javascript - 将 D3.js 标签文本显示为两行

javascript - 单击 Div 外部以将其关闭。 SVG 和 D3, Angular

javascript - 在 Javascript 中将变量重置为 0

javascript - XMLDocument onreadystatechange 在 Chrome 中不会触发

javascript - 使用 JavaScript 将特定标签的文本复制到剪贴板

javascript - AngularJS - 如何将范围变量传递给服务?

reactjs - 如何解决 "Uncaught Error: unknown type: dragstart"问题