html5 - SVG element produced by JavaScript script jumps out from the div -

i have created gantt chart using d3 gannt chart (http://bl.ocks.org/dk8996/5449641). embed div wish position following:

        <div id="gantt" class="container">             <div id="gantt-deep">                 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>                 <script type="text/javascript" src="js/lib/gantt-chart-d3v2.js"></script>                 <script type="text/javascript" src="js/gantt.js"></script>                </div>         </div> 

the problem when run code svg created script jumps out of div seen in following code when looked in firefox:

<div id="gantt" class="container"> <div id="gantt-deep">     <script src="http://d3js.org/d3.v3.min.js" type="text/javascript">     <script src="js/lib/gantt-chart-d3v2.js" type="text/javascript">     <script src="js/gantt.js" type="text/javascript"> </div> </div> <svg class="chart" width="990" height="490">     <g class="gantt-chart" width="990" height="490" transform="translate(150, 20)"> </svg> 

my question how position svg element created?

in gnatt-chart-d3v2.js included in example provided there's following line:

var svg = d3.select("body") .append("svg") .attr("class", "chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g")     .attr("class", "gantt-chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("transform", "translate(" + margin.left + ", " + margin.top + ")"); 

from can tell appends svg element body. that's why svg "jumps" out of div - because appended body, not inserted include script tags.

a possible solution change "body" whatever element want append svg to, in case #gantt-deep, want target div id gantt-deep.

this one-time solution, because modifies source code doesn't allow inserting svg wherever. if need chart you'd have pass in parameter gnatt function indicate want it.

actually, here's modified version of gnatt-chart-d3v2.js:

// code here function gantt(tasks, element) {    // modified line      inittimedomain();     initaxis();      var svg = d3.select(element)    // modified line     .append("svg")     .attr("class", "chart")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)     .append("g")         .attr("class", "gantt-chart")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)     .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");     // leave rest untouched 

and when initiate chart call function parameter, instance gantt(tasks, "#gantt-deep");

i didn't test this, should work.