javascript - 为什么需要将一串方法分开？

Question

我正在meteor.js中基于this example line chart实现响应式(Reactive)折线图。在我为该图表提取的代码中，我有以下 block ，它工作得很好。

var paths = svg.selectAll("path.line")
  .data([dataset]);

paths
  .enter()
  .append("path")
  .attr("class", "line")
  .attr('d', line);

paths
  .attr('d', line);

paths
  .exit()
  .remove();

但是，当我尝试编写如下内容时，轴仍然显示，但路径不渲染。到底为什么会这样？

var paths = svg.selectAll("path.line")
      .data([dataset])
    .enter()
      .append("path")
      .attr("class", "line")
      .attr('d', line)
    .exit()
      .remove();

Answer 1

这是因为您在不同的对象上调用函数。 D3 通过对 .data() 的调用返回更新、输入和退出选择 - 这是您在第一个代码块的 paths 中存储的内容。然后您获取进入、更新和退出选择并处理它们。

在第二个代码块中，您正在调用.enter()，然后您将处理输入选择。也就是说，.enter() 之后的所有代码都应用于输入选择，而不是像之前一样应用于其他选择。

因此，在新附加的 path 元素上调用 .exit().remove() (这应该会给你一个错误)而不是返回值.data() 如第一段代码所示。