我想用新数据动态更新 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-Function 我用新数据调用 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);
});
如果我单击“更改”-输入,则使用此代码重建树形图。但是,如果我采用此代码:
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);
});
树形图保持不变,另一个带有新数据值的树形图在我的第一个下方打开。在 keyup 上,另一个 js 函数被触发并将新数据发送到 buildTreemap()。