为什么需要分离一系列方法

Question

我正在基于这个示例折线图在metro.js中实现一个反应折线图。在我为该图表提取的代码中，我有下面的块，它工作得很好。

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()的调用中返回update、enter和exit选项——这是您在第一个代码块的paths中存储的内容。然后获得进入、更新和退出选择并进行处理。

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

因此，对新添加的path元素调用.exit().remove()（这应该会给您一个错误），而不是像第一块代码中那样调用.data()的返回值。