Question

我尝试使用d3.js渲染树形图，这些d3.js会根据大多数静态数据的变化定期提取数据和动画/过渡（很少值会发生变化）。我来自示例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是flare.json的副本here，但删除了一个节点。

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

问题是，在3秒之后，数据被取出并且AgglomerativeCluster的文本被移除，但不是它所在的框。我不能说我完全理解d3js足以知道我到底是什么＃39;我做错了。

Answer 1

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

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

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

更新d3js树图

1 个答案: