Sathish Panduga Sathish Panduga - 5 months ago 22
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 */
</div>
</div>


Here is the working demo: http://jsfiddle.net/JnNwu/974/

what am I missing?

Answer

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

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

Change this to append to the desired div #tree

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

See the working JSFiddle.

Comments