Javascript d3.js树映射新数据不';不渲染

Javascript d3.js树映射新数据不';不渲染,javascript,d3.js,treemap,Javascript,D3.js,Treemap,这是我第一次尝试d3.js,我不知道如何重新绘制树形图。我正在尝试使用json请求将新数据加载到。我已经在treemap.js中添加了以下代码 d3.select(".search_field").on("click", function(){ d3.json("/applications.json?search=Applejuice", function(json) { div.data([json]).selectAll("div") .dat

这是我第一次尝试d3.js,我不知道如何重新绘制树形图。我正在尝试使用json请求将新数据加载到。我已经在treemap.js中添加了以下代码

d3.select(".search_field").on("click", function(){
    d3.json("/applications.json?search=Applejuice", function(json) {
        div.data([json]).selectAll("div")
            .data(treemap.nodes)
            .enter().append("div")
            .attr("class", "cell")
            .style("background", function(d) { return d.children ? color(d.name) : null; })
            .transition()
            .duration(1500)
            .call(cell);
   }); 
});

在请求完成并且数据正确加载到对象中之后,我检查了var div

您正在附加新元素,而不是更新现有元素。线路

.enter().append("div")

处理此问题,如果要更新现有数据,则应将其删除。在
.data()
之后调用
.enter()
将为您提供以前不存在的数据,
.exit()
提供不再存在的数据。如果发现新旧数据没有正确合并,可以使用可选的第二个参数
.data()
提供合并函数。

Lars,非常感谢您的回复。删除.enter().append(“div”)有帮助,但我还必须添加treemap.sticky(true);在div.data部分之前。谢谢看来我说得太快了。当我尝试加载具有非常相似值的数据时,我会得到以下行为。我没有完全理解.enter().exit()调用。正如我所说,您可能需要使用可选的函数参数来
.data()
并按ID合并或类似的操作。