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：更新（）被调用两次，DOM对象中产生两次。这一定是我忽略的简单事情！

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

Answer 1

原来这是一件有点傻：

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

实际上没有cluster类创建一个div。

与替换它：

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

解决问题！