![]() There is also a good amount of JavaScript execution happening here, particularly when you start nesting BorderContainers within BorderContainers within BorderContainers, etc. The downside is that widget libraries create a fairly heavyweight DOM structure in order to provide all the fancy features and handle backward compatibility with older browsers. See the Pen d3 CSS Layout – Dojo PieChart by Bill White ( on CodePen. Then you move the splitter, each pie chart hears the resize event fired by its parent ContentPane and it updates its own size accordingly: ![]() In the example below, you see two resizable pie charts in a Dojo split container. You can then listen for the ContentPane’s resize event to know when to update the d3 chart it contains. For example, in Dojo you can layout the interface using a BorderContainer which holds multiple ContentPanes. If the visualization is running inside a web application created with something like Sencha ExtJS or Dojo, you can utilize the event mechanisms that these libraries provide in their widget infrastructures. Is it a JavaScript widget library? Maybe an event from a container created by jQuery? Or are you using CSS3 to layout the page? So how do you know when to resize the d3 chart? Well, that depends on what is controlling the layout of the DOM elements. ![]() The trick is knowing when to resize the chart in response to the layout change. When the visualization resizes, it should simply make better use of the available space. To me, making the content bigger or smaller based on the viewport size is no more useful than if your word processor made the font bigger when you viewed it in full-screen mode. And by resizing, I do not mean scaling the chart to fit. Granted, the focus of these examples is usually on the design of the visualization itself, but in the real world these graphics will usually run inside a larger application and it should fill the space available. One thing that always catches my attention with d3 examples is the lack of code that makes the chart fill the viewport when it is resized. ![]() Question: Is it possible to make a single page web application that uses CSS to layout the page and still have your d3 charts know when to update their size/appearance? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |