The data flow graph for this example (made with graph-diagrams).
This example shows how to make a dynamic graphic using D3 4.0 and ReactiveModel that fills its containing element and responds to resize. This is useful when, for example, you want to be able to load your visualization “full screen” and give users the ability to size the window however they want to. It’s also useful when you want to use CSS to define the size of a visualization container, then have the visualization automatically fit inside it.
To experience the resize behavior, run this example full-screen and resize the browser.
Part of a series of examples demonstrating ReactiveModel.
Notes:
- This is using an alpha version of D3 4.0. The main difference in this example from D3 3.5 is the use of selection.merge, which merges enter with update.
- The call to
addPropertiesinstantiates instances of reactive-property with the given defaults. These behave similarly to the getter-setter functions described in Towards Reusable Charts. - The function that takes (svg, width, height) as input becomes a reactive-function. This will be invoked once all inputs are defined, and when any inputs change. It is invoked at most once every animation frame, so there are no unnecessary DOM updates. In other words, even if there are many resize events fired per animation frame, the DOM will only be updated with the most recent width and height values each frame (at most 60 times per second, synchronized with the display).
forked from curran‘s block: Responding to Resize
Built with blockbuilder.org