[英]D3 - Hierarchical data-set, layout works, but can't update data
See Here. 看这里。 https://bl.ocks.org/dooglz/9b4d979d31d3ef10ab4f65c085e43b10
https://bl.ocks.org/dooglz/9b4d979d31d3ef10ab4f65c085e43b10
I have a Hierarchical data-set, some nodes have different amount of children, some have none. 我有一个层次数据集,有些节点有不同数量的子代,有些则没有。 I want this displayed as a set of nested divs.
我希望将其显示为一组嵌套的div。 I have achieved this in the above block, although I'm not sure if I've gone about it the best way.
尽管我不确定是否已经采用最佳方法,但在上面的代码中我已经实现了这一目标。 But it is how I want it to look, the layout is fine.
但这就是我想要的样子,布局很好。
Each node has a .val property, this is displayed at the end of each div's .html(). 每个节点都有一个.val属性,该属性显示在每个div的.html()末尾。 Some nodes children are a set of identical 'types', I have grouped these together as selections.
一些节点子节点是一组相同的“类型”,我将它们分组在一起作为选择。 Again not sure if this was the best way to achieve this.
再次不确定这是否是实现此目标的最佳方法。
The problem I have is that if the data changes (values inside the nodes, structure never changes), the data does not change in divs if the layout function is re-run. 我的问题是,如果数据更改(节点内的值,结构从不更改),并且重新运行布局功能,则数据在div中不会更改。
I think I've done the nested selections wrong ( https://bost.ocks.org/mike/nest/ ) and broken the chain of data, and I'm not sure how to fix it. 我认为我做错了嵌套选择( https://bost.ocks.org/mike/nest/ )并打断了数据链,我不确定如何解决它。
I know I need to add an extra 我知道我需要额外添加
ComputeUnits.html(....); / SimdUnits.html(....); ... etc
Somewhere but I'm not sure how or where. 某个地方,但我不确定如何或在哪里。
Original Code snippet here for longevity: 长寿的原始代码段:
function hardcoded(){
let container = d3.select("body");
let ComputeUnits = container.selectAll(".ComputeUnit")
.data(data)
.enter().append("div")
.attr("id", (d)=>{return d.type + '-' + d.id})
.attr("class",(d)=>{return d.type})
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")})
let Salus = ComputeUnits.selectAll(".SALU")
.data(function(d) { return d.children.filter(c => c.type == "SALU"); })
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type})
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")})
let SimdUnits = ComputeUnits.selectAll(".SimdUnit")
.data(function(d) { return d.children.filter(c => c.type == "SimdUnit"); })
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type})
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")})
let SimdLanes = SimdUnits.selectAll(".SimdLane")
.data(function(d) { return d.children; })
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type})
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")})
}
I would have thought that this would work: 我以为这会起作用:
function hardcoded(){
let container = d3.select("body");
let ComputeUnits = container.selectAll(".ComputeUnit").data(data);
ComputeUnits
.enter().append("div")
.attr("id", (d)=>{return d.type + '-' + d.id})
.attr("class",(d)=>{return d.type});
ComputeUnits
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")});
let Salus = ComputeUnits.selectAll(".SALU")
.data(function(d) { return d.children.filter(c => c.type == "SALU"); });
Salus
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type});
Salus
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")});
let SimdUnits = ComputeUnits.selectAll(".SimdUnit")
.data(function(d) { console.log(1,d); return d.children.filter(c => c.type == "SimdUnit"); });
SimdUnits
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type});
SimdUnits
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")});
let SimdLanes = SimdUnits.selectAll(".SimdLane")
.data(function(d) { console.log(2,d);return d.children; });
SimdLanes
.enter().append("div")
.attr("id", (d)=>{return d.type + '-'+d.id})
.attr("class",(d)=>{return d.type});
SimdLanes
.html((d)=>{return d.type + '-' + d.id+(d.val?("_"+d.val):"")});
but it seems that the when the data updates, all the .enter()'s fire again, but not the update ".html((d)..." 但是似乎当数据更新时,所有.enter()都会再次触发,而不是更新“ .html((d)...”
Bonus points: I need this to work as a recursive function, as shown in the block, the hard-coded method is just for clarity. 优点:我需要将此功能用作递归函数,如该块所示,硬编码方法只是为了清楚起见。
I think I have found a solution, I was not aware of the new V4 update/merge pattern. 我想我已经找到了解决方案,但我不知道新的V4更新/合并模式。
Furthermore, The key was to do: ComputeUnits = ComputeUnits.merge(cuenter) 此外,关键在于执行: ComputeUnits = ComputeUnits.merge(cuenter)
This seems to work as it should, but it still calls the .enter() on every element, anytime the data chages. 这似乎可以正常工作,但是在每次数据中断时,它仍然在每个元素上调用.enter()。 But now it does call the Update/merge, so it looks like it works.
但是现在它确实调用了Update / merge,因此看起来可以正常工作。
function hardcoded() {
let container = d3.select("body");
let ComputeUnits = container.selectAll(".ComputeUnit").data(data);
let cuenter = ComputeUnits
.enter().append("div")
.attr("id", (d) => {
return d.type + '-' + d.id
})
.attr("class", (d) => {
return d.type
});
ComputeUnits = ComputeUnits.merge(cuenter)
.text((d) => {
console.log("cu update");
return d.type + '-' + d.id + '-' + d.val;
});
let Salus = ComputeUnits.selectAll(".SALU")
.data(function (d) {return d.children.filter(c => (c.type === "SALU"));
});
let saenter = Salus
.enter().append("div")
.attr("id", (d) => {
console.log("salu enter")
return d.type + '-' + d.id
})
.attr("class", (d) => {
return d.type
});
Salus = Salus.merge(saenter)
.text((d) => {
console.log("salu update");
return d.type + '-' + d.id + '-' + d.val;
});
let SimdUnits = ComputeUnits.selectAll(".SimdUnit")
.data(function (d) {
console.log(1, d);
return d.children.filter(c => c.type === "SimdUnit");
});
let suenter = SimdUnits
.enter().append("div")
.attr("id", (d) => {
return d.type + '-' + d.id
})
.attr("class", (d) => {
return d.type
});
SimdUnits = SimdUnits.merge(suenter)
.text((d) => {
console.log("simdu update");
return d.type + '-' + d.id + '-' + d.val;
});
let SimdLanes = SimdUnits.selectAll(".SimdLane")
.data(function (d) {
return d.children;
});
let slenter = SimdLanes
.enter().append("div")
.attr("id", (d) => {
return d.type + '-' + d.id
})
.attr("class", (d) => {
return d.type
});
SimdLanes = SimdLanes.merge(slenter)
.text((d) => {
console.log("siml update");
return d.type + '-' + d.id + '-' + d.val;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.