Question

我正在基于this example line chart在meteor.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()的调用中的选择 - 这是您在paths中存储在第一个代码块中的内容。然后，您将获得输入，更新和退出选择并处理它们。

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

因此，在新附加的.exit().remove()元素（应该给出错误）上调用path，而不是在第一个代码块中调用.data()的返回值

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

1 个答案: