Question

我一直在设计一个甘特图。 javascript文件位于html正文中：

<body>
  <section>
    <div class="container">
      <h1 class="arrow">Areas of Expertise</h1>
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
      <script type="text/javascript" src="js/gantt.js"></script>
    </div>
  </section>
</body>

但是，当我查看源代码时，svg文件位于section标记之外：

<body>
  <section>...</section>
  <script>...</script>
  <svg class="chart" width="777" height="827">...</svg>
</body>

我希望我的图表能够呈现它所处的容器的属性。它似乎并没有这样做。以下是我的行动图表的实例：http://jsbin.com/pigudeyovi/2/edit?html,output

为什么.svg不在section代码中？

Answer 1

在确定输出出现的位置时，代码的位置并不重要--D3要求您明确指定将任何新元素添加到DOM的位置。

在这种情况下，输出将始终显示在body元素的正下方。这在甘特图库源代码中是硬编码的，不能由用户配置。要更改它，您需要更改库的源代码或自己移动DOM元素。

Answer 2

gnatt-chart插件将SVG附加到body。

https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js#L75

为什么我的d3.js图像出现在错误的位置？

2 个答案: