为什么必须再次致电select才能选择全部？

Question

我在d3（+ react）中有一些代码，其中DOM中已经有圆圈，我正在尝试向其中添加一些属性...

以下代码有效，但是如果我仅使用s.selectAll()而不是在最后一个块中再次调用select()，则该代码将无效。为什么会这样？

    const s = select(this.node) // select the ref to operate on it with the d3 API
      .attr('width', this.width + margin * 2)
      .attr('height', this.height + margin * 2)
      .append('g') // append a <g> container
      .attr('transform', `translate(${margin}, ${margin})`); // add back in the margins

    s.append('g')
      .attr('class', 'x axis') // set the class for the x axis
      .attr('transform', `translate(0, ${this.height})`)
      .call(axisBottom(xScale)); // add the axis

    s.append('g')
      .attr('class', 'y axis') // set the class for the y axis
      .call(axisLeft(yScale)); // set the axis

    // the incoming data is an array of numbers, and mapping through it gives the [value, index] which is y and x
    const dataset = data.map((y, x) => [y, x] as [number, number]);
    const color = this.randomColor();

    s.append('path')
      .datum(dataset)
      .attr('class', 'line')
      .style('stroke', color('.2'))
      .style('fill', 'none')
      .style('stroke-width', 3)
      .attr('d', chartLine);

    select(this.node)
      .selectAll('.dot')
      .data(dataset)
      .style('stroke', color('.5'))
      .style('fill', color('.5'))
      .attr('transform', `translate(${margin}, ${margin})`)
      .attr('cx', (_, i) => xScale(i))
      .attr('cy', d => yScale(d[0]))
      .attr('r', 4);
``