9

データに基づいてコンテンツを生成するために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を再バインドして表示するための最良の方法はどのようになっていますか？同じ文をもう一度呼び出す必要がありますか、それともより良い方法ですか？

より複雑なデータ構造の場合を考えてみましょう。すなわち

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

と

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

obj1.field='newValue'を実行するとどうなりますか。再バインドはどのように行われますか？

ありがとう！

4

1 に答える 1

18

関数を使用します。たとえば、文字列の配列からリストを作成する関数は次のとおりです。

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]);
于 2012-05-22T23:04:09.107 に答える