Question

我创建了一个D3甘特图。

使用morte或更少的代码：

var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus)    
gantt(tasks)

这会自动创建一个名为chart的新svg。

我想将它添加到我现有的div

<div id ="resultContainer">
</div>

我在github上做了一些关于源代码的研究（https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js到最后）并且发现了设置选择器的可能性

d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).selector('#resultContainer')

但是崩溃了。有人知道如何将它添加到现有的div中吗？

Answer 1

显然，这是该图书馆作者的错误。

在代码的最后他写了这个：

gantt.selector = function(value) {
if (!arguments.length)
    return selector;
selector = value;
return gantt;
};

正如您所指出的那样，可以允许用户设置选择器。

然而，在代码的开头，他写了......

var selector = 'body';

...这使得前一个函数无用。它始终附加到<body>。

解决方案：下载库并创建自己的版本，更改...

var selector = 'body';

...只是为了：

var selector;

通过此更改，您可以使用selector()传递您的选择。

这是一个演示，我正在使用来自该库的同一作者的bl.locks。我复制了库并更改了提到的变量。在HTML中，我在带有 lorem ipsum 的段落之前创建了一个带有类.foo的div。然后，我选择了div：

var gantt = d3.gantt().selector(".foo").taskTypes(taskNames).etc...

您可以看到（检查页面）图表被附加到div而不是身体：http://bl.ocks.org/anonymous/raw/84385e7c6ac859ad24feb3662e46e3fd/

实际上，您甚至不需要检查页面：如果它被附加到正文中， lorem ipsum 将位于图表上方，而不是下方，就像它一样。