4

我正在使用 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）

4

0 回答 0