javascript - 将 d3.gantt 图表附加到选定的 div-6ren

javascript - 将 d3.gantt 图表附加到选定的 div

转载作者：行者123 更新时间：2023-11-28 04:27:17

我创建了一个 D3 甘特图。

用 morte 或更少的代码:

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

这会自动创建一个名为图表的新 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 中吗？

最佳答案

显然，这是该库的作者的错误。

在代码末尾他写了这样的内容:

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 中，我创建了一个带有类 .foo 的 div在带有 lorem ipsum 的段落之前。然后，我选择了 div:

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

您可以看到(检查页面)图表已附加到 div，而不是正文:http://bl.ocks.org/anonymous/raw/84385e7c6ac859ad24feb3662e46e3fd/

实际上，您甚至不需要检查页面:如果将其附加到正文，lorem ipsum 将位于图表上方，而不是下方。

关于javascript - 将 d3.gantt 图表附加到选定的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44927393/

文章推荐： javascript - 使用