使用'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

在您的第一个代码段中,您正在执行.attron the lines变量.这是update选择(选择页面上已有的东西).由于没有预先存在,因此无需更新.

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