Sathish Panduga Sathish Panduga - 4 months ago 17x
CSS Question

Issue styling a d3 js tree chart in a DIV

I have a tree chart which I would like to put into a div tag, so that I can hide the chart and control its positioning easily.

But this doesnt work when I try to fit d3 chart into a different div.

Tried this way -

<div class="overviewMain" id="overviewMain">
<div class="overviewHeader"><span>Overview</span></div>
<div class="treediv" style="margin-top:60px;">
<div id="tree"></div> /* --> D3 Tree chart */

Here is the working demo:

what am I missing?


You are appending your SVG to body instead of the div.

var svg ="body").append("svg")

Change this to append to the desired div #tree

var svg ="#tree").append("svg")

See the working JSFiddle.