d3 шаблон ввода/вывода с массивом объектов

Question

Я хочу создать очень простой список <ul> с d3 ограниченными данными.

данные в массиве объектов в виде:

[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 указать ключевую функцию в качестве второго аргумента selection.data

(от Object Constancy - Key Functions)

В вашем случае это будет:

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