javascript - d3.js treemap 新数据不呈现

Question

这是我第一次尝试 d3.js，我不知道如何重绘树状图。我正在尝试将新数据加载到 treemap example 中使用 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。

Answer 1

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

.enter().append("div")

负责处理此问题，如果您想更新现有数据，则应将其删除。在 .data() 之后调用 .enter() 将为您提供之前不存在的数据，.exit() 将提供之前不存在的数据不存在了。如果您发现新旧数据未正确合并，您可以使用 .data() 的可选第二个参数来提供合并功能。