更新 d3js 树图

Question

我正在尝试使用定期获取数据的 d3.js 和基于大多数静态数据的变化（很少有值变化）的 animates/transitions 来渲染树状图。我正在使用 here.

示例

所以我有一些类似的东西：

var w = 960,
h = 500,
color = d3.scale.category20c();

var treemap = d3.layout.treemap()
.size([w, h])
//.sticky(true)
.value(function(d) { return d.size; });

var div = d3.select("#chart").append("div")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");

function update (json) {
  var d = div.data([json]).selectAll("div")
  .data(treemap.nodes, function (d) { return d.name; });

  d.enter().append("div")
  .attr("class", "cell")
  .style("background", function(d) { return d.children ? color(d.name) : null; })
  .call(cell)
  .text(function(d) { return d.children ? null : d.name; });

  d.exit().remove();
};

d3.json("flare.json", update);

setTimeout(function () {
  d3.json("flare2.json", update);
}, 3000);

function cell() {
  this
  .style("left", function(d) { return d.x + "px"; })
  .style("top", function(d) { return d.y + "px"; })
  .style("width", function(d) { return d.dx - 1 + "px"; })
  .style("height", function(d) { return d.dy - 1 + "px"; });
}

其中 flare2.json 是找到 here 的 flare.json 的副本，但删除了一个节点。

➜  test git:(master) ✗ diff flare.json flare2.json
10d9
<       {"name": "AgglomerativeCluster", "size": 3938},
380c379
< }
\ No newline at end of file
---
> }

问题是，3 秒后，获取了数据并删除了 AgglomerativeCluster 的文本，但没有删除它所在的框。我不能说我完全理解 d3js 足以知道我到底是什么做错了。

Answer 1

在RTFM [1, 2, 3]之后，我了解到d3.js将更新现有节点、添加新节点和删除死节点的思想分开。我有添加和删除的代码，但我缺少更新代码。简单地添加这个就可以了：

d.transition().duration(750).call(cell);

在创建 var d 之后但在调用 d.enter() 之前。

更新 d3js 树图

updating a d3js tree map

javascript

json

d3.js