The below codepen will serve as an example for the rest of the post. (Note that this example makes use of Vuetify, a component/CSS framework, and our preferred UI toolkit for Vue.)
The display consists of a simple graph with a button to update the values. Click on the button, and a new graph renders near-instantly (the power of Vue). Let's delve into how this is happening.
The parent component contains both the data itself ('dataModel') and the method by which we change the data ('updateData'). This keeps the information in sync across components. For our more complex visuals, we may have a large number of different filters that will call an API and bring down different data to display; in this example, we just have a "randomize" button.
Scrolling back up to the top, you will find the 'button-component'. It receives the 'updateData' function as a prop passed down from its parent; when the user clicks the button, it will randomize the values in our 'dataModel'.
Just below that, you will see at last the 'svg-component'. The template seems simple - a div wrapping an svg with the id of "visualization." The visualization itself is created through the 'drawSVG' method, which contains all the d3 code that creates the graph. In a real world scenario, this would be our clients' legacy code with some minimal tweaks for implementation purposes, or methods that we write ourselves for a new or improved visualization.
Using the "mounted" Vue lifecycle hook, we ensure the svg-component draws for the first time when the component is mounted. Note that 'mounted' is the earliest hook on which we can call drawSVG - any earlier (on created, for example), and the DOM will not be ready to be manipulated by d3. We then use Vue's ability to "watch" changes to the dataModel, so that the svg-component redraws whenever it receives new values.
This is a high-level overview of how we approach these implementations. The beauty of Vue is that there are many ways to approach each problem. Do you have any experience in creating and orchestrating D3 visualizations with Vue? Let us know in the comments.