d3 v4合并输入并更新选择以删除重复的代码
问题说明
我知道 merge 可用于组合d3 v4中的输入和更新选择，如下面的简单示例所示： https://bl.ocks.org/mbostock/3808218 。
I understand that merge can be used to combine enter and update selections in d3 v4, as in the simple example here: https://bl.ocks.org/mbostock/3808218.
我有一个散点图，其中多个变量显示在共享的x轴上，适用于由下拉框选择的不同组。选择新组时，将更新整个数据点集，并为每个变量添加点数，如下所示：
I have a scatter plot in which multiple variables are displayed on a shared x-axis, for different groups selected by a dropdown box. When a new group is selected, the overall set of datapoints is updated, with points for each variable added like this:
.each(function(d, i) {
var min = d3.min(d.values, function(d) { return d.value; } );
var max = d3.max(d.values, function(d) { return d.value; } );
// Join new data with old elements
var points = d3.select(this).selectAll("circle")
.data(d.values, function(d) { return (d.Plot); } );
// Add new elements
points.enter().append("circle")
.attr("cy", y(d.key))
.attr("r", 10)
.style("opacity", 0.5)
.style("fill", function(d) { return elevColor(d.Elevation); })
.merge(points) //(?)
.transition()
.attr("cx", function(d) { return x((d.value-min)/(max-min)); });
// Remove old elements not present in new data
points.exit().remove();
这整段代码大部分都是针对整体输入选择重复的，并且在整体更新选择中也是如此（而不是单个变量），这似乎不太理想。如何 merge 用于删除此重复的代码？
This whole piece of code is largely duplicated for the overall enter selection and again in the overall update selection (as opposed to the individual variables), which seems less than ideal. How would merge be used to to remove this duplicated code?
正确答案
我是作者您过去问题的解决方案这个。我在评论中提供了这个解决方案，而不是一个正确的答案，因为我匆忙，我写了一个懒惰的解决方案，充满了复制—正如你在这里说的。在同一个问题中我发表评论，解决方案减少重复是使用 merge 。
I'm the author of the solution for your past question, which you linked in this one. I provided that solution in a comment, not as a proper answer, because I was in a hurry and I wrote a lazy solution, full of duplication — as you say here. As I commented in the same question, the solution for reducing the duplication is using merge.
现在，在您的代码中，有关于设置的重复更新和输入选项：
Right now, in your code, there is duplication regarding the setup of the "update" and "enter" selections:
var update = g.selectAll(".datapoints")
.data(filtered[0].values);
var enter = update.enter().append("g")
.attr("class", "datapoints");
update.each(function(d, i){
//code here
});
enter.each(function(d, i){
//same code here
});
为避免重复，我们合并选择。你可以这样做：
To avoid the duplication, we merge the selections. This is how you can do it:
var enter = update.enter().append("g")
.attr("class", "datapoints")
.merge(update)
.each(function(d, i) {
//etc...
这是更新的Plunker： http://plnkr.co/edit/MADPLmfiqpLSj9aGK8SC?p=preview
Here is the updated Plunker: http://plnkr.co/edit/MADPLmfiqpLSj9aGK8SC?p=preview
这篇好文章是转载于：学新通技术网
