I use the d3 chord diagram to visualize some data from multiple JSON files. There is one JSON file per year, and when I select the year (selected input or button), the data should be updated.
My approach is this:
// ... // Setup width, height, radius, chord layout and append the svg container element // ... // Load the default data file d3.json("data/m2010.json", function(matrix) { render(matrix); }); // ... // Usual render function, like the examples of mbostock.org // ... // Listener: the user want to change the year d3.select('#year').on('click', function(){ d3.event.preventDefault(); // Actually it an href d3.selectAll('.groups').remove(); d3.selectAll('.chords').remove(); d3.json("data/m2011.json", function(matrix) { render(matrix); }); });
So what I do is delete all the groups and chords of the previous visualization, and then load the new data. I don't think this is a d3 way to do this.
What I want to do is add some kind of transition between the visualizations. I read about the update template (enter, update, exit), but I don’t know how I could adapt it to my problem.
The render function and the entire source are here (this is just JavaScript)
source share