Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Treemap Horizontal/Vertical Layout #49

Closed
ahoiin opened this issue Jun 29, 2016 · 2 comments
Closed

Treemap Horizontal/Vertical Layout #49

ahoiin opened this issue Jun 29, 2016 · 2 comments

Comments

@ahoiin
Copy link

ahoiin commented Jun 29, 2016

Hi,
how can I set the horizontal or vertical layout for the treemap independent of the width/height ration?
I would like to create a wide treemap with the fields appearing underneath thus the labels are better readable.
Screenshot 1 (wider than higher) should be like Screenshot 2 (higher than wider).
screenshot 2016-06-29 21 40 08
screenshot 2016-06-29 21 40 56

@mbostock
Copy link
Member

You can’t really do this using squarify.ratio because that ratio is independent of the orientation and is always greater than or equal to one.

If you are willing to give up inner padding, you can approximate this result by instead using a squarify.ratio of one, and then stretching the resulting treemap to fit the desired target ratio. Here’s an example:

http://bl.ocks.org/mbostock/5c50a377e76a1974248bd628befdec95

@ahoiin
Copy link
Author

ahoiin commented Jun 30, 2016

Yeah that should work. Thanks for that.
In that case w and h should be greater 0 otherwise -1px will break the layout.
var w = Math.round(d.x1 * ratio) - Math.round(d.x0 * ratio); return (w > 0 ? w - 1 : 0) + "px";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants