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

我希望能够将单独的输入和更新块组合成一个带有合并的组合输入+更新块。我在这里的逻辑错了吗？

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

Answer 1

我认为，只是传递给merge函数的选择是不正确的。查看更新的fiddle：

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

D3 V4 - 使用与一般更新模式合并

1 个答案: