Я использую хордовую диаграмму d3 для визуализации некоторых данных из нескольких файлов JSON. Существует один файл JSON в год, и когда я выбираю год (ввод выбора или кнопка), данные должны обновляться.
Мой подход таков:
// ...
// 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);
});
});
Итак, что я делаю, так это удаляю все группы и аккорды предыдущей визуализации, а затем загружаю новые данные. Я не думаю, что это d3-способ сделать это.
Что я хочу сделать, так это добавить какой-то переход между визуализациями. Я читал о шаблоне обновления (вход, обновление, выход), но не знаю, как я могу адаптировать его к своей проблеме.
Функция render и весь исходный код находятся здесь (это просто JavaScript)
