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

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

本文关键字：数据 新创建 创建 enter js d3 绑定      更新时间：2023-09-26

我有一个奇怪的问题，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();
}

EDIT:JSFiddle here:update（）被调用两次，DOM对象被生成两次。这一定是我忽略的一件简单的事情！

编辑：完整代码位于http://maxhunter.me/clusterviewd3.html如果你在乎。。。

原来这有点傻：

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

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

替换为：

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

解决了问题！

相关文章：