Apparently, this is a mistake from the author of that library.

At the end of the code he wrote this:

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

Which, as you pointed out, could allow the user to set the selector.

However, at the beginning of the code, he wrote...

var selector = 'body';

... which renders the previous function useless. It always appends to the <body>.

Solution: Download the library and create your own version, changing...

var selector = 'body';

... for just:

var selector;

With that change you can pass your selection using selector().

Here is a demo, I'm using a bl.locks from the same author of the library. I copied the library and changed the mentioned variable. In the HTML, I created a div with a class .foo before a paragraph with a lorem ipsum. Then, I selected the div with:

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

You can see (inspecting the page) that the chart is appended to the div, not to the body:

Actually, you don't even need to inspect the page: if it was appended to the body the lorem ipsum would be above the chart, not below, as it is.

Related Query

More Query from same tag