將d3.gantt圖表添加到選定的div

與莫特或更少這樣的代碼：

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

此自動創建一個名爲圖表新SVG。

我想將它添加到現有的div

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

我確實在github上thesource代碼在一些研究（https://github.com/dk8996/Gantt-Chart/blob/master/gantt-chart-d3.js挺到底），發現設置像

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

選擇的可能性

但是，崩潰。有誰知道如何將它添加到現有的div？

2017-07-05 Florian

顯然，這是該圖書館作者的錯誤。

在代碼的結尾，他寫道的：

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，之前的段落是loresum。於是，我選擇了與格：

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

你可以看到（檢查頁），該圖被追加到div，不會對身體：http://bl.ocks.org/anonymous/raw/84385e7c6ac859ad24feb3662e46e3fd/

事實上，你甚至不需要檢查該頁面：如果將其附加到身體上，則將在圖表上方，而不在下面，因爲它是。

2017-07-05 13:42:22

回答