0

I'm new to d3. I have created a collapsible tree to create an org chart which uses data from a database and mostly works great.

The problem is the svg is a fixed size.

I don't know how many nodes / levels will be in the org chart as it will be used on data / companies of varying sizes.

At the moment I have the svg fixed to a large size which works as a proof of concept.

I need to resize the svg to the width and height of the chart inside. Either setting the dimensions once to the maximum known size of the tree or adjusting the size of the svg when the tree is expanded / collapsed.

This is what I'm using with just a small amount of demo data:

This is where is is set initially but I want to make it dynamic:

var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

http://jsfiddle.net/urquhartps/c9WC9/1/

Many thanks

Paul U
  • 1
  • 1
  • You need to reset the dimensions on resize, see http://www.w3schools.com/jsref/event_onresize.asp – Lars Kotthoff May 21 '14 at 13:11
  • Based on this [response](http://stackoverflow.com/questions/13103748/dynamically-resize-the-d3-tree-layout-based-on-number-of-childnodes)'s fiddle, I created another [fiddle](http://jsfiddle.net/CKW5q/) where the `svg` element is also changed according to the new height calculation. This should get you going on the next step of changing the width dimension, although it could prove more difficult. – FernOfTheAndes May 21 '14 at 18:01
  • Thank you. I was on the right path, trying to adjust the height attribute of the svg but it just wasn't working. It seems you need to declare the svg and the vis (g) separately then append that to the svg in order for it to work for some reason. – Paul U May 22 '14 at 09:30
  • Any help on getting the width to do the same would be greatly appreciated. I know where it's set now but how to calculate it? Cheers. – Paul U May 22 '14 at 09:43

0 Answers0