Question

我想用d3有界数据创建一个非常简单的<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实现对象恒定，请将键函数指定为selection.data的第二个参数

（来自Object Constancy - Key Functions)

在你的情况下，它将是：

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

d3使用对象数组进入/退出模式

1 个答案: