D3 Js 从现有示例调整 svg 大小

Question

第一次想制作D3 Js甘特图。我找到了一个很好的例子，符合我的期望 https://dk8996.github.io/Gantt-Chart/（Example2）。但是我在调整 svg 的大小时遇到问题。我想将该示例放入具有固定高度和宽度的 d3 容器中。该示例的按钮可以 copy/pasted 到我的代码中。但是 SVG 总是在我的 code/site.

的底部生成

<div class="Card-body">
  <div id="d3-container">
    //HERE
  </div>  
</div>

我尝试了一些方法，但我不知道该怎么做。该示例始终占用整个屏幕。我该怎么做？

Answer 1

您的甘特图库中的 SVG 始终添加到文档正文元素中。如果你想改变它，你需要替换 https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js 文件中的第 16 行和另外两行（22 和 23）——例如将其下载到您的计算机并从本地 index.html 文件引用它，而不是从 Gannt-Chart 库 URL - to

var selector = '#d3-container';
...
var height = document.getElementById("d3-container").clientHeight - margin.top - margin.bottom-5;
var width = document.getElementById("d3-container").clientWidth - margin.right - margin.left-5;

这样 SVG 就会在您的 DIV 容器中创建。

D3 Js 从现有示例调整 svg 大小

D3 Js resize svg from exisiting example

html

javascript

svg

d3.js