Limit svg to required height and width

[Vacilando]

SVG dimensions are provided in pixels, meaning it is only rarely as large as the displayed image.

Is it possible to calculate and adjust the real width and height of the displayed image and limit the SVG dimensions to that?

Examples:

• http://www.kinpedia.net/leaf/q937 ... quite neat, although the height is too large
• http://www.kinpedia.net/leaf/q1339 ... very bad: the width / scale is too small to show the whole image, and the height is also not fitting

[ErikGartner]

Yes I think that is possible.

After computing the layout of all the nodes it is pretty easy to compute the bounding box of all the nodes. The dimension of that bounding box is what your asking for.

The best way to fix it is to add support in dTree for this. However I'm quite busy at the moment. Feel free to make a pull request if you have solution.

Otherwise it should be possible to make a quick fix by overwriting the nodeRenderer callback. You could do something like this:

max_x = 0;
min_x = 100000;
max_y = 0;
min_y = 100000;

// pass this function in the option object to the constructor
function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
  max_x = max(x, max_x);
  min_x = min(x, min_x)
  max_y = max(y, max_y);
  min_y = min(y, min_y)

  return TreeBuilder._nodeRenderer(name, x, y, height, width, extra,
                                                         id,nodeClass, textClass, textRenderer);

After creating the graph once you would have the required size and could make a new using that size. Again that's only a hack but should work if that works for your application.

[Vacilando]

Thanks, I'll give it a try with what you suggest. But I think this feature would be great for everybody that uses this excellent visualization technique of yours. Hope you can add support for it soon.

[RamAmancha]

Anyone found a fix for this? We would like to render SVG according to the screen (especially on mobile phone). kept height: 1200, width: 800 and when image cuts or doesn't fit in the view

[ErikGartner]

Hi @RamAmancha

Not sure what you mean, if you want the SVG to scale with the screen, that is not implemented but there is a work around. It involves setting the SVG to max size (in pixels) then rescaling it using callbacks. See my implementation in another project below:

https://github.com/ErikGartner/treehouse/commit/96e5288#r32622012

Example of the code in action: https://treehouse.gartner.io/g/f/58e58be650453b6d49d7

/Erik

[RamAmancha]

Thanks Erik. Yes I meant scale with the screen and the work around works perfectly.