D3 Js resize svg from exisiting example-CodePudding

I want to create an D3 Js gantt chart for the first time. I found a pretty good example which fits my expectations https://dk8996.github.io/Gantt-Chart/ (Example2). But I have problem resizing the svg. I want to fit the example into my d3 container which has a fixed height and width. The buttons of the example can just be copy/pasted into my code. But the SVG is always generated at the bottom of my code/site.

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

I tried a few things but I just dont know how to do this. The example is always taking the whole screen. How can I do this?

CodePudding user response：

The SVG by your Gantt chart library is always added to the document body element. If you want to change that you would need to replace line 16 and additional two lines (22 and 23) in https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js file - e.g. download it to your computer and reference it from your index.html file locally, not from Gannt-Chart library 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;

so that SVG will then be created in your DIV container.