d3.js enter() 未正确绑定到数据 - 重新创建现有数据

Question

我有一个奇怪的问题，即 enter() 选择无法检测到已经存在的元素。每次我调用 enter() 它都会重新创建相同的元素，并且不会删除任何元素。

怎么了？

clusters = [ 
{ "clusternumber": 9,  "value": "blah1"},
{ "clusternumber": 10, "value": "blah2"},
];

function redraw()
{
var cluster = clusterView.selectAll(".cluster")
                .data(clusters, function(d) {return d.clusternumber; });

//
// Clusters entering the view
//

var clusterEnter = cluster.enter()
                        .insert("div", ".cluster");

//
// Clusters to update
//

var clusterUpdate = d3.transition(cluster)
  .style("fill-opacity", 1);

//
// Clusters to remove
//

var clusterExit = d3.transition(cluster.exit())
    .style("fill-opacity", 0)
    .remove();

}

编辑：JSFiddle here：update() 被调用两次，DOM 对象生成两次。这一定是我忽略的简单问题！

编辑：完整代码在 http://maxhunter.me/clusterviewd3.html 如果你关心...

Answer 1

结果有点傻：

.insert("div", ".cluster");

实际上并没有在 class cluster 中创建 div。

替换为：

.insert("div")
.attr("class", "cluster")

解决问题！[=13=]

d3.js enter() 未正确绑定到数据 - 重新创建现有数据

d3.js enter() not binding to data correctly - re-creating existing data

javascript

arrays

object

d3.js