d3.jsでデータを再バインドする最良の方法

Question

私はデータに基づいてコンテンツを生成するためにd3.jsライブラリを使用しています。

ここでは簡単な例を示します。

data_arr = [0,1,2,3,4]; 
d3.select("#mylist").selectAll('li').data(data_arr).enter().append("li").html(
    function(d) 
    { 
     var element = document.createElement('div'); 
     element.innerHTML = '<div id="innerDiv">' + d + '</div>'; 
     return element.innerHTML; 
    }); 

私の配列を変更した場合、たとえば、新しいデータは[5,3]です。新しいHTMLを再バインドして表示するにはどうすればよいでしょうか？私は同じ文章をもう一度呼び出す必要がありますか、それとも良い方法ですか？

もっと複雑なデータ構造の場合を考えてみましょう。私はobj1.field = 'newValueに' を実行どうなり すなわち

data_arr = [obj1, obj2, obj3, obj4]; 

と

element.innerHTML = '<div id="innerDiv">' + d.field + '</div>'; 

。リバインドはどのように行われますか？

ありがとうございます！

Answer 1

関数を使用します。例えば、ここでは文字列の配列からリストを移入する関数です：今、あなたのリストを初期化したい場合は

function list(ul, data) { 
    var li = ul.selectAll("li").data(data); 
    li.exit().remove(); 
    li.enter().append("li"); 
    li.text(function(d) { return d; }); 
} 

は、あなたが言うことができます。

d3.select("#list").call(list, [0, 1, 2, 3, 4]); 

を、後であなたがしたい場合はアップデート、あなたが言うことができます：あなたは（あなたは、メソッドチェーンを必要としない）希望する場合

d3.select("#list").call(list, [5, 3]); 

は、あなたがselection.callことなくこれを書くことができます。

list(d3.select("#list"), [5, 3]);