Any way to have graph height always be 100% of available space?

Question

Any way to have graph height always be 100% of available space?

twointum opened this issue 5 years ago · comments

Love the plugin, I don't understand the height attribute. I wish I could just have it be 100% of the div space. The size changes when I expand the sidebars and it is making the graph either too small or run off the page. Thank you!

Ottmar Gobrecht · Answer 1 · Mon Jul 22 2019 02:32:33 GMT+0800 (China Standard Time)

Hi,

the main problem with dynamic SVGs like the D3 force Layout is that you need to define the height and the width of the resulting graph because there are many depending things in the background. It is unfortunately not as easy as it is with images.

I think your graph has the option keepAspectRatioOnResize set to true and therefore your graphs height is changing when the available horizontal space is changing.

Please set this to false and play around with the option useDomParentWidth. Both options can help to have the graph acting like an image when the available space is changing. The aspect ratio is calculated by your given initial height and width values.

Ther are a lot of options and API methods available - have a look in the docs. By the way: each option is a link to the docs - so a simple click will show you a description and examples.

If you want to have something like a full screen view (the graph should occupy all available height) then you need to use the graphs JavaScript API to change the height on each window resize event.

Please describe in more details what you are trying to achieve.

Best regards
Ottmar

twointum · Answer 2 · Tue Jul 23 2019 07:24:26 GMT+0800 (China Standard Time)

Thank you! Keep aspect ratio on resize was the fix! Aaron

…

On Sun, Jul 21, 2019 at 11:33 AM Ottmar Gobrecht ***@***.***> wrote: Hi, the main problem with dynamic SVGs like the D3 force Layout is that you need to define the height and the width of the resulting graph because there are many depending things in the background. It is unfortunately not as easy as it is with images. I think your graph has the option keepAspectRatioOnResize <https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.keepAspectRatioOnResize> set to true and therefore your graphs height is changing when the available horizontal space is changing. [image: image] <https://user-images.githubusercontent.com/10425445/61595023-420b8f80-abf2-11e9-94fb-f25f67f3ba52.png> Please set this to false and play around with the option useDomParentWidth <https://ogobrecht.github.io/d3-force-apex-plugin/module-API.html#.useDomParentWidth>. Both options can help to have the graph acting like an image when the available space is changing. The aspect ratio is calculated by your given initial height and width values. Ther are a lot of options and API methods available - have a look in the docs. By the way: each option is a link to the docs - so a simple click will show you a description and examples. If you want to have something like a full screen view (the graph should occupy all available height) then you need to use the graphs JavaScript API to change the height on each window resize event. Please describe in more details what you are trying to achieve. Best regards Ottmar — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#42?email_source=notifications&email_token=AIQYAKFPMH2SXHJWGJPDZILQASTUDA5CNFSM4IFMX6OKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2OJATQ#issuecomment-513577038>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIQYAKFKLFN2DUMRL6QERTDQASTUDANCNFSM4IFMX6OA> .

Ottmar Gobrecht · Answer 3 · Fri Jul 26 2019 22:40:03 GMT+0800 (China Standard Time)

Hi Aaron,

thank you for your feedback! I will close the issue.

Best regards
Ottmar