d3オブジェクトの配列を含む入力/終了パターン

Question

非常に単純な<ul>リストを作成したいと思います。これまで

[0 => {title: "title one"}, 1=> {title: "title two"}]

マイコード：

データは、の形でオブジェクトの配列である

var titles = _.findWhere(scope.titles, {key: d.key}).values; 
var li = d3.select('.overview-popup ul').selectAll('li') 
    .data(titles); 

li.enter() 
    .append('li') 
    .text(function(n){ return n.title }); 

li.exit().remove(); 

この結果は、私は、予測するようではないですli要素は、新しいデータ配列が入力されるたびにcleanedになります。いくつかのノードを残し、ノードの数に応じて更新します。これはインデックスのためですか？

fiddle here

Answer 1

多分これは役立ちます：

をD3.jsでオブジェクトの不変を達成するために、Object Constancy - Key Functions)から

を（selection.dataする2番目の引数としてキー機能を指定しますあなたのケースでは

それは次のようになります。

var li = d3.select('.overview-popup ul') 
      .selectAll('li') 
      .data(titles, function(e) { return e.title });