javascript - D3更新模式下select using merge和selectAll的区别

Question

我目前正在阅读《Data Visualization with D3 4.x Cookbook Second Edition》。数据更新方式在第3章中有所提及。有时作者使用merge()来实现数据更新，但有时作者使用selectAll()来实现。我发现在某些情况下它们是不可互换的。我现在很困惑，我想知道，如何确定在数据更新中应该采取哪种方式。
在3.2.2中，作者使用merge()来实现数据更新

    function render(data) { // <- B
        var bars = d3.select("body").selectAll("div.h-bar") // <- C
                .data(data); // Update <- D

        // Enter
        bars.enter() // <- E
                .append("div") // <- F
                    .attr("class", "h-bar") // <- G

            .merge(bars) // Enter + Update <- H
                .style("width", function (d) {
                    return (d * 3) + "px"; // <- I
                })
                .text(function (d) {
                    return d; // <- J
                });


        // Exit
        bars.exit() // <- K
                .remove();
    }

在3.6.2中，作者使用selectAll()来实现数据更新

    function render(data, category) {
        var bars = d3.select("body").selectAll("div.h-bar") // <-B
                .data(data);

        // Enter
        bars.enter()
            .append("div") // <-C
                .attr("class", "h-bar")
            //.merge(bars)
                .style("width", function (d) {
                    return (d.expense * 5) + "px";}
                )
            .append("span") // <-D
                .text(function (d) {
                    return d.category;
                });

        // Update
        d3.selectAll("div.h-bar").attr("class", "h-bar");

        // Filter
        bars.filter(function (d, i) { // <-E
                return d.category == category;
            })
            .classed("selected", true);
    }

我真的需要你的帮助!谢谢!

Answer 1

那是不是 更新选择(即 bars )，这只是作者为删除类而设计的奇怪方式 selected从酒吧。
您会看到，当您单击这些按钮时，类别为 selected 的 div变成红色，而其他 div 保持蓝色。所以，作者用这个...

d3.selectAll("div.h-bar").attr("class", "h-bar")

...删除 selected类，因为 attr("class", "foo")将覆盖任何现有类( see my answer here )。
让我感到奇怪的是，作者 Nick Zhu 相当不错，我不明白他为什么要这样做来删除一个类。他可以简单地做:

bars.classed("selected", function (d) {
    return d.category == category;
});

这是它有效的证据(我正在从他的 GitHub repo 复制他的代码):

body {
  font-family: "helvetica";
}

button {
  margin: 0 7px 0 0;
  background-color: #f5f5f5;
  border: 1px solid #dedede;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  font-size: 12px;
  line-height: 130%;
  text-decoration: none;
  font-weight: bold;
  color: #565656;
  cursor: pointer;
}

.box {
  width: 200px;
  height: 200px;
  margin: 40px;
  float: left;
  text-align: center;
  border: #969696 solid thin;
  padding: 5px;
}

.red {
  background-color: #e9967a;
  color: #f0f8ff;
}

.blue {
  background-color: #add8e6;
  color: #f0f8ff;
}

.cell {
  min-width: 40px;
  min-height: 20px;
  margin: 5px;
  float: left;
  text-align: center;
  border: #969696 solid thin;
  padding: 5px;
}

.fixed-cell {
  min-width: 40px;
  min-height: 20px;
  margin: 5px;
  position: fixed;
  text-align: center;
  border: #969696 solid thin;
  padding: 5px;
}

.h-bar {
  min-height: 15px;
  min-width: 10px;
  background-color: steelblue;
  margin-bottom: 2px;
  font-size: 11px;
  color: #f0f8ff;
  text-align: right;
  padding-right: 2px;
}

.v-bar {
  min-height: 1px;
  min-width: 30px;
  background-color: #4682b4;
  margin-right: 2px;
  font-size: 10px;
  color: #f0f8ff;
  text-align: center;
  width: 10px;
  display: inline-block;
}

.baseline {
  height: 1px;
  background-color: black;
}

.clear {
  clear: both;
}

.selected {
  background-color: #f08080;
}

.control-group {
  padding-top: 10px;
  margin: 10px;
}

.table {
  width: 70%;
}

.table td,
th {
  padding: 5px;
}

.table-header {
  background-color: #00AFEF;
  font-weight: bold;
}

.table-row-odd {
  background-color: #f0f8ff;
}

.table-row-odd {
  background-color: #d3d3d3;
}

.code {
  display: inline-block;
  font-style: italic;
  background-color: #d3d3d3;
  border: #969696 solid thin;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.countdown {
  width: 150px;
  height: 150px;
  font-size: 5em;
  font-weight: bold;
}

.axis .grid-line {
  stroke: black;
  shape-rendering: crispEdges;
  stroke-opacity: .2;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2;
}

.dot {
  fill: #fff;
  stroke: steelblue;
}

.area {
  stroke: none;
  fill: steelblue;
  fill-opacity: .2;
}

.pie text {
  fill: white;
  font-weight: bold;
}

._0 {
  stroke: none;
  fill: darkred;
  fill-opacity: .7;
}

._1 {
  stroke: none;
  fill: red;
  fill-opacity: .7;
}

._2 {
  stroke: none;
  fill: blue;
  fill-opacity: .7;
}

._3 {
  stroke: none;
  fill: green;
  fill-opacity: .7;
}

._4 {
  stroke: none;
  fill: yellow;
  fill-opacity: .7;
}

._5 {
  stroke: none;
  fill: blueviolet;
  fill-opacity: .7;
}

.bubble {
  fill-opacity: .3;
}

.bar {
  stroke: none;
  fill: steelblue;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Data Filter</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>

  <script type="text/javascript">
    var data = [ // <-A
      {
        expense: 10,
        category: "Retail"
      },
      {
        expense: 15,
        category: "Gas"
      },
      {
        expense: 30,
        category: "Retail"
      },
      {
        expense: 50,
        category: "Dining"
      },
      {
        expense: 80,
        category: "Gas"
      },
      {
        expense: 65,
        category: "Retail"
      },
      {
        expense: 55,
        category: "Gas"
      },
      {
        expense: 30,
        category: "Dining"
      },
      {
        expense: 20,
        category: "Retail"
      },
      {
        expense: 10,
        category: "Dining"
      },
      {
        expense: 8,
        category: "Gas"
      }
    ];

    function render(data, category) {
      var bars = d3.select("body").selectAll("div.h-bar") // <-B
        .data(data);

      // Enter
      bars.enter()
        .append("div") // <-C
        .attr("class", "h-bar")
        .style("width", function(d) {
          return (d.expense * 5) + "px";
        })
        .append("span") // <-D
        .text(function(d) {
          return d.category;
        });

      // Update, COMMENTED OUT!
      //d3.selectAll("div.h-bar").attr("class", "h-bar");

      // Filter
      bars.classed("selected", function(d, i) { // <-E
        return d.category == category;
      });
    }

    render(data);

    function select(category) {
      render(data, category);
    }
  </script>

  <div class="control-group">
    <button onclick="select('Retail')">
        Retail
    </button>
    <button onclick="select('Gas')">
        Gas
    </button>
    <button onclick="select('Dining')">
        Dining
    </button>
    <button onclick="select()">
        Clear
    </button>
  </div>

</body>

</html>