D3.js动态更新树映射
我想用新数据动态更新树映射。我读过这篇文章,但我没有把它提出来运行。这是我的代码:D3.js动态更新树映射,d3.js,treemap,D3.js,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.rig
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);
});
使用这段代码,如果我点击“更改”-输入,树映射将重建。但是如果我接受这个代码:
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()。我稍微简化并修改了JSFIDLE,以便在单击按钮时显示第二组数据。关键在于,在单击按钮时调用的函数中,您可以像初始化树形图时一样传入新数据,然后相应地处理enter和update选择,如下所示:
var node = div.datum(data2).selectAll(".node")
.data(treemap.nodes);
node.enter().append("div")
.attr("class", "node");
node.transition().duration(1500).call(position)
.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) + ")"; });
请注意,输入选择合并到更新选择中,因此只需附加节点并在更新选择上设置属性就足够了。我看不到任何错误的格式 我的第一个数据是:
{
"name": "items",
"children": [
{
"id": "33447",
"anzahl": "13",
"color": "#ff8080",
"keytable": "CCR",
"bordercolor": "#B25959"
},
{
"id": "33455",
"anzahl": "4",
"color": "#80ff80",
"keytable": "COMMODITY",
"bordercolor": "#59B259"
},
{
"id": "2",
"anzahl": "37",
"color": "#80ffff",
"keytable": "COUNTRY",
"bordercolor": "#59B2B2"
},
{
"id": "33465",
"anzahl": "3",
"color": "#ff0000",
"keytable": "FUNDS",
"bordercolor": "#B20000"
},
{
"id": "67400",
"anzahl": "22",
"color": "#ffff00",
"keytable": "GOVERNMENT",
"bordercolor": "#B2B200"
},
{
"id": "29",
"anzahl": "183",
"color": "#008080",
"keytable": "INDEX",
"bordercolor": "#005959"
},
{
"id": "33449",
"anzahl": "1",
"color": "#8080ff",
"keytable": "INTER",
"bordercolor": "#5959B2"
},
{
"id": "67422",
"anzahl": "8",
"color": "#800000",
"keytable": "PARTY",
"bordercolor": "#590000"
},
{
"id": "33358",
"anzahl": "4",
"color": "#8000ff",
"keytable": "PM",
"bordercolor": "#5900B2"
},
{
"id": "30",
"anzahl": "1920",
"color": "#f90631",
"keytable": "SHARE",
"bordercolor": "#AE0422"
},
{
"id": "81",
"anzahl": "70960",
"color": "#11b1ee",
"keytable": "WARRANT",
"bordercolor": "#0B7BA6"
},
{
"id": "1",
"anzahl": "1",
"color": "#004000",
"keytable": "WORLD",
"bordercolor": "#002C00"
}
]
}
第二个数据是:
{
"name": "items",
"children": [
{
"id": "29",
"anzahl": "12",
"color": "#008080",
"keytable": "INDEX",
"bordercolor": "#005959"
},
{
"id": "55645",
"anzahl": "165",
"color": "#11b1ee",
"keytable": "WARRANT",
"bordercolor": "#0B7BA6"
}
]
}
好的,在控制台中,它看起来不同…但是为什么:
数据1:
Object {name: "items", children: Array[12]}
area: 333000
children: Array[12]
depth: 0
dx: 740
dy: 450
name: "items"
value: 39.15699051089851
x: 0
y: 0
__proto__: Object
数据2:
Object {name: "items", children: Array[2]}
children: Array[2]
name: "items"
__proto__: Object
但是孩子们也在里面
更新:
我认为在data2上,错误“UncaughtTypeError:无法读取未定义的属性'children'”意味着缺少一个数据集
在fiddle中,函数中定义的两个数据集。但在我的实例中,数据集传递给函数。就像这样:
function buildTreemap(jVals_all, jVals_filtered, doRebuild){
if(doRebuild === false){
var data1 = jQuery.parseJSON(jVals_all);
}
if(doRebuild === true){
var data2 = jQuery.parseJSON(jVals_filtered);
}
....
}
那么,如果我发送数据2,函数是否可能因为数据1为空而缺少数据1的子函数
最后,我只想将一个对象传递给函数
function buildTreemap(data){}
如果这更容易解决,那么我更喜欢这种方式。您看到了吗?是的,但这只会使用相同的数据重新缩放div的大小。我需要用新数据重新缩放。原理是一样的。它仍然在更改时将新数据传递到树映射布局。嗯,请看一下我的更新。你能把你的完整代码发布到某个地方吗,最好是在JSFIDLE上?如果没有完整的图片,很难看到发生了什么。好的,非常好!但是如果我使用更复杂的数据,这种行为是非常奇怪的。看看这个:我认为旧节点留在树状图中,新节点被推送…有人这样想?!!?!只需在change函数的末尾添加
node.exit().remove()
。作为对另一个问题的响应,您似乎正在传递格式错误的数据。