我想通过新数据动态更新Treemap。 我已经阅读了这篇文章，但是我没有使它正常运行。这是我的代码：
function buildTreemap(jVals){
//$("#treemap").empty();
var data = jQuery.parseJSON(jVals);
var margin = {top: 40, right: 10, bottom: 10, left: 10},
width = 760 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.sort(function(a,b) { return a.anzahl - b.anzahl; })
.round(true)
.value(function(d) { return Math.log(d.anzahl); });
var div = d3.select("#treemap").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px")
.attr("id", "first");
var node = div.datum(data).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
.style("background", function(d) { return d.color ? d.color : "#ffffff";})
.text(function(d) { return d.children ? "blue" : d.keytable + "(" + d.anzahl + "-" + Math.max(0, d.dx) + "-" + Math.max(0, d.dy) + ")"; })
;
};
我从另一个Js函数中调用了buildTreemap()，并传入了新数据。现在我想用过渡/持续时间重新绘制树状图。
请有人能帮帮我吗？非常感谢...
更新： 我已添加了以下内容：
d3.selectAll("input").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return Math.log(d.anzahl); };
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
这段代码可以让矩形树图在我点击“change”输入框时重新构建。但如果我使用以下代码：
d3.selectAll("#search").on("keyup", function change() {
var value = function(d) { return Math.log(d.anzahl); };
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
树状图保留，另一个带有新数据值的树状图会在我的第一个树状图下方打开。在键盘按键抬起时，另一个JavaScript函数会被触发并发送新数据到buildTreemap()。