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

Question

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

<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 文件中引用它，而不是从甘特图库 URL 中引用 - 到

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 容器中创建。