[英]D3: dataset update does not remove elements from DOM
I have a linechart, and by default I need to show just a subset of elements, then show a different subset on dropdown event. 我有一个折线图,默认情况下,我只需要显示元素的子集,然后在下拉事件中显示另一个子集。
Here is initial code: 这是初始代码:
varlines = svg.append("g")
.attr('id', 'lines')
.selectAll('g')
.data(datum.filter(function(d) {
return d.group == 'default'
}),
function(d) {
return d.name
}
).enter()
.append("g")
.attr("class", 'varline')
.append("path")
.attr("class", "line")
.attr("id", function(d) {
return 'line_' + d.name
})
.attr("d", function(d) {
return line(d.datum);
});
And it works fine. 而且效果很好。 Now, here is the code that meant to update my selection:
现在,这是用于更新我的选择的代码:
$('.dropdown-menu a').click(function(d) {
var g = this.text;
dd.select("button").text(g) // switch header
var newdata = datum.filter(function(d) {
return d.group == g
}); # datalines for selected group
varlines.data(newdata, function(d) { return d.name })
.enter()
.merge(varlines)
.append("g")
.attr("class", 'varline')
.attr("id", function(d) {
return 'line_' + d.name
})
.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.datum);
});
varlines.exit().remove()
And it works weird. 它的工作很奇怪。 While it adds stuff and does not duplicate dom elements, it doesn't remove old ones.
虽然它添加了内容并且不复制dom元素,但它不会删除旧元素。
Also, when I console.log(varlines);
另外,当我
console.log(varlines);
at any step, it shows only two initial elements in the _groups
Array, and no _enter
and _exit
properties, even having 3 lines in the svg. 在任何步骤中,它仅显示
_groups
数组中的两个初始元素,没有_enter
和_exit
属性,即使svg中有3行。
I am using d3v4, jquery3.1.1.slim 我正在使用d3v4,jquery3.1.1.slim
If you look at your varlines
, you'll see that it is just an enter selection: 如果查看
varlines
,您会看到它只是一个回车选择:
varlines = svg.append("g")
.attr('id', 'lines')
.selectAll('g')
.data(datum.filter(function(d) {
return d.group == 'default'
}),
function(d) {
return d.name
}
).enter()
.append("g")
//etc...
And, of course, you cannot call exit()
on an enter selection. 而且,当然,您不能在回车选择上调用
exit()
。 Therefore, this: 因此,这:
varlines.exit().remove()
... is useless. ...没用。
Solution : make varlines
an "update" selection by breaking it (I'm using var
here, so we avoid it being a global): 解决方案 :通过破坏
varlines
成为“更新”选择(我在这里使用var
,因此我们避免将其作为全局varlines
):
var varlines = svg.append("g")
.attr('id', 'lines')
.selectAll('g')
.data(datum.filter(function(d) {
return d.group == 'default'
}),
function(d) {
return d.name
}
);
varlines.enter()
.append("g")
//etc...
Pay attention to this fact: since you're using D3 v4, you have to use merge()
, otherwise nothing will show up the first time the code runs. 请注意以下事实:由于您使用的是D3 v4,因此必须使用
merge()
,否则第一次运行代码时将不会显示任何内容。 Alternativelly, you can just duplicate your code: 另外,您也可以复制代码:
varlines = svg.append("g")
.attr('id', 'lines')
.selectAll('g')
.data(datum.filter(function(d) {
return d.group == 'default'
}),
function(d) {
return d.name
}
)
varlines.enter()
.append("g")
//all the attributes here
varlines.//all the attributes here again
EDIT: the problem in your plunker is clear: when you do... 编辑:在您的pluker的问题很明显:当您执行...
.attr("class", "line")
... you are overwriting the previous class. ...您正在覆盖上一课。 Therefore, it should be:
因此,应为:
.attr("class", "varline line")
Here is the updated plunker: https://plnkr.co/edit/43suZoDC37TOEfCBJOdT?p=preview 这是更新的插件: https ://plnkr.co/edit/43suZoDC37TOEfCBJOdT ? p = preview
Here is my new code following Gerardo's recommendations as well as this Mike's tutorial: https://bl.ocks.org/EmbraceLife/efb531e68ce46c51cb1df2ca360348bb 这是我根据Gerardo的建议以及Mike的教程编写的新代码: https : //bl.ocks.org/EmbraceLife/efb531e68ce46c51cb1df2ca360348bb
function update(data) {
var varlines = svg.selectAll(".varlines")
.data(data, function(d) {return d.name});
// ENTER
// Create new elements as needed.
//
// ENTER + UPDATE
varlines.enter().append("g")
.attr("class", 'varline')
.attr("id", function(d) {
return 'line_' + d.name
})
.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.datum);
})
.style('stroke', function(d) {
return z(d.name)
});
// .merge(varlines); does not help if uncomment and move after .enter()
// EXIT
// Remove old elements as needed.
varlines.exit().remove();
}
and then in the initial code (queue.await(...)): 然后在初始代码(queue.await(...))中:
svg.append("g")
.attr('id', 'lines');
var data = datum.filter(function(d){return (d.group ==
settings['groups_settings']['default_group']) && (d.tp == tp)});
update(data)
and the same on dropdown change event: 和下拉更改事件相同:
var newdata = datum.filter(function(d){return (d.group == g) && (d.tp == tp)});
update(newdata);
Behaviour remains the same - correctly displays first batch, but does not remove lines on any changes (just keeps adding lines) 行为保持不变-正确显示第一批,但不会删除任何更改的行(只是不断添加行)
on print .selectAll returns this: 在print .selectAll返回以下内容:
Selection {_groups: Array(1), _parents: Array(1), _enter: Array(1), _exit: Array(1)}
_enter:[Array(6)]_exit
:[Array(0)]_groups
:[Array(6)]
_parents:[svg]
__proto__:Object]
here is the full code: https://gist.github.com/Casyfill/78069927d2b95bf4856aa8048a4fa4be 这是完整的代码: https : //gist.github.com/Casyfill/78069927d2b95bf4856aa8048a4fa4be
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.