javascript - 使用 'attr()' 时选择之间的差异

Question

我有一段代码在单击按钮时调用。

const lines = svg.select('lines').selectAll('line').data(arr);
lines.enter().append('line');
lines
  .attr('x1', d => d)
  .attr('y1', d => d)
  .attr('x2', d => d+2)
  .attr('y2', d => d+2)
  .attr('stroke-width', 2);

当我点击按钮时没有任何显示，但是在第二次点击按钮时可以看到线条。

所以我尝试仅将 .attr() 链接到 .append()。像这样:

const lines = svg.select('lines').selectAll('line').data(arr);
    lines.enter().append('line')
      .attr('x1', d => d)
      .attr('y1', d => d)
      .attr('x2', d => d+2)
      .attr('y2', d => d+2)
      .attr('stroke-width', 2);

这次可以在第一次点击按钮时看到线条。

我只想知道这种行为背后的原因。

Answer 1

在您的第一个代码片段中，您在 lines 变量上执行 .attr。这包含 update 选择(页面上已有的那些 things 的选择)。由于没有预先存在的内容，因此无需更新。

在第二个代码片段中，您在 .append 方法(通过链接)返回的 thing 上执行 .attr。那些 东西 刚刚通过 .enter 添加到页面并且是 enter 选择。