D3 V4-将合并与常规更新模式一起使用

Question

我能够成功使用enter / update / exit逻辑来更新我的可视化，但是，我这样做是在不使用此处概述的新.merge()函数的情况下进行的： https : //github.com/d3/d3/blob /master/CHANGES.md#selections-d3-selection，所以让我觉得我仍在以v3的方式进行操作。 每当我尝试根据文档使用.merge()函数时，它总是会破坏它。

我希望你们能帮助我弄清楚如何更新逻辑并以v4方式完成。

例如，在以下代码中，我将数据连接到<g>元素，然后将其他元素（ <path>和<text> ）嵌套在<g>元素内。 因此，对于将数据追加到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块合并为一个合并的enter + update合并块。 我的逻辑错了吗？

完整示例： https ： //jsfiddle.net/bschxdjb/2/

Answer 1

我认为，仅传递给合并功能的选择是错误的。 检查更新的小提琴 ：

  // 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) + ")";
    });