JavaScript脚本生成的SVG元素从div跳出

我已经使用D3甘特图（）创建了甘特图。我将其嵌入到我希望定位的div中，如下所示：

        <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>

问题在于，当我运行代码时，脚本创建的SVG会跳出div，如在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>

我的问题是如何定位创建的svg元素？

在您提供的示例中包含的gnatt-chart-d3v2.js中，有以下行：

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 + ")");

据我所知，它在主体中附加了一个svg元素。这就是svg从div中“跳出”的原因——因为它附加到主体中，而不是插入包含脚本标记的位置

一个可能的解决方案是将“body”更改为您希望将svg附加到的任何元素，在您的情况下，它将是

#gantt deep

，因为您希望将id为gantt deep的div作为目标

这是一个一次性的解决方案，因为它修改了不允许在任何地方插入svg的源代码。如果您需要另一个图表，则必须向

gnatt

函数传递一个参数，以指示您需要它的位置

实际上，下面是gnatt-chart-d3v2.js的修改版本：

然后在启动图表时，使用另一个参数调用函数，例如

gantt（tasks，#gantt deep”）

我没有测试这个，但它应该可以工作。
你想要什么？你的问题模棱两可。答案如下。这并不含糊。如果你不是一个专业的程序员，可能很难制定问题，但即使是制定得很糟糕的问题也需要答案，以便处于相同位置的其他人能够掌握手头的真正问题，这是沃伦尼发现的。问题是我不知道SVG元素是如何嵌入到gantt-chart-d3v2.js脚本中的，我假设它们将在脚本自动放置的同一个div中创建。非常感谢！我想这正是我想知道的。我将对此进行测试，并让您知道results@RaimoGIS没问题：）
// some code here
function gantt(tasks, element) {    // modified this line

    initTimeDomain();
    initAxis();

    var svg = d3.select(element)    // modified this 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 the rest untouched