I'm using a d3 chord diagram to visualize some data from multiple JSON files. There is one JSON file per year, and when I choose a year (a select input or a button), the data should be updated.
My approach is like 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's an href
d3.selectAll('.groups').remove();
d3.selectAll('.chords').remove();
d3.json("data/m2011.json", function(matrix) {
render(matrix);
});
});
So what I do is remove all the groups and chords of the previous visualization and then load the new data. I don't think that this is the d3-way to do that.
What I want to do is add some kind of transition between visualizations. I've read about the update pattern (enter, update, exit), but don't know how I could adapt it to my problem.
The render function and all the source is here (it's just the JavaScript)
