d3 v4：合并输入和更新选择以删除重复代码

Question

我知道merge 可用于在 d3 v4 中组合输入和更新选择，如下面的简单示例：https://bl.ocks.org/mbostock/3808218。

我有一个散点图，其中多个变量显示在共享的 x 轴上，用于下拉框选择的不同组。选择新组时，会更新整个数据点集，每个变量的点添加如下：

.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 将如何用于删除此重复代码？

完整的例子在这里：http://plnkr.co/edit/VE0CtevC3XSCpeLtJmxq?p=preview

Answer 1

我是solution for your past question 的作者，您在此链接中链接了它。我在评论中提供了该解决方案，而不是作为正确答案，因为我很着急，我写了一个懒惰的解决方案，充满了重复——正如你在这里所说的。正如I commented 在同一个问题中，减少重复的解决方案是使用merge。

现在，在您的代码中，“更新”和“输入”选项的设置存在重复：

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
});

为避免重复，我们merge 选择。你可以这样做：

var enter = update.enter().append("g")
    .attr("class", "datapoints")
    .merge(update)
    .each(function(d, i) {
        //etc...

这是更新后的 Plunker：http://plnkr.co/edit/MADPLmfiqpLSj9aGK8SC?p=preview