4

複数の JSON ファイルのデータを視覚化するために d3 コード ダイアグラムを使用しています。年に 1 つの 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