Javascript D3V4-使用合并和常规更新模式

我能够成功地使用enter/update/exit逻辑来更新我的可视化，但是，我这样做没有使用这里概述的新的.merge函数：所以有些东西让我觉得我仍然在用v3的方式来做。每当我试图使用基于文档的.merge函数时，它总是会破坏它

我希望你们能帮我弄清楚如何更新逻辑，用v4的方式来做

例如，在下面的代码中，我将数据连接到元素，然后嵌套其他元素和元素内部。因此，对于向vis.group添加数据的每个代码块，我需要编写一个相同的代码块，用于调用dataJoin进行更新

// DATA JOIN
var dataJoin = vis.clipPath.selectAll(".group")
  .data(vis.displayData);

// ENTER
vis.group = dataJoin.enter().append("g")
  .attr("class", "group")
  .attr("transform", function(d) {
    return "translate(0," + vis.y(d.registrationEndDate) + ")";
  });

// UPDATE
dataJoin
  .attr("transform", function(d) {
    return "translate(0," + vis.y(d.registrationEndDate) + ")";
  });

// ENTER
var path = vis.group.append("path")
  .attr("class", "line")
  .style("opacity", 0.1)
  .style("fill", function(d) {
    if (d.type === "currentEmployments") {
      return "#50A2DA";
    }
  })
  .attr("d", function(d) {
    return addPath(d, vis);
  });

// UPDATE
dataJoin.select(".line")
  .attr("d", function(d) {
    return addPath(d, vis);
  });

...

所有这些看起来都太重复了，我认为v4应该通过允许我使用.merge来解决这个问题，但是当我尝试下面的方法时，它不起作用：

// ENTER
var path = vis.group.append("path")
  .attr("class", "line")
  .style("opacity", 0.1)
  .style("fill", function(d) {
    if (d.type === "currentEmployments") {
      return "#50A2DA";
    }
  })
  .merge(dataJoin) // ENTER + UPDATE
    .attr("d", function(d) {
      return addPath(d, vis);
    });

我希望能够将单独的enter和update块组合成一个带有merge的组合enter+update块。我的逻辑错了吗

---

完整示例：

我认为，只是传递给合并函数的选择不正确。检查更新：

---

完美的你说得对。select[class]是我的.merge调用中缺少的。

  // ENTER
  vis.group = dataJoin.enter().append("g")
    .attr("class", "group");

  // UPDATE
  vis.group
    .merge(dataJoin)
    .attr("transform", function(d) {
      return "translate(0," + vis.y(d.registrationEndDate) + ")";
    });

  // ENTER
  var path = vis.group.append("path")
    .attr("class", "line")
    .style("opacity", 0.1)
    .style("fill", function(d) {
      if (d.type === "currentEmployments") {
        return "#50A2DA";
      }
    })
    .merge(dataJoin.select(".line"))
    .attr("d", function(d) {
      return addPath(d, vis);
    });


  // Append Firm Name
  vis.group.append("text")
    .attr("class", "firm-name")
    .style("font-weight", "bold")
    .style("fill", function(d) {
      if (d.type === "currentEmployments") {
        return "#50A2DA";
      }
    })
    .merge(dataJoin.select(".firm-name"))
    .text(function(d) {
      var label = d.name;
      return label;
    })
    .attr("transform", function(d) {
      var range = vis.y(d.registrationBeginDate) - vis.y(d.registrationEndDate);
      return "translate(50," + (range / 2) + ")";
    });


  // Append Year range
  vis.group.append("text")
    .attr("class", "years")
    .attr("fill", "#696969")
    .merge(dataJoin.select(".years"))
    .text(function(d) {
      var count = d3.timeYear.count(d.registrationBeginDate, d.registrationEndDate);
      var years = '';
      if (count > 1) {
        years = " (" + count + " years)";
      } else if (count == 1) {
        years = " (" + count + " year)";
      } else if (count < 1) {
        years = " (<1 year)";
      }
      var label = convertToYear(d.registrationBeginDate) + " - " + convertToYear(d.registrationEndDate) + years;
      return label;
    })
    .attr("transform", function(d) {
      var range = vis.y(d.registrationBeginDate) - vis.y(d.registrationEndDate);
      return "translate(50," + ((range / 2) + 15) + ")";
    });