Accepted answer

Your first set of circles gets appended to a group that is translated:

let svg ='.plot').append("svg")
  .attr('class', 'svgPlot')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + + margin.bottom)
  .attr("transform","translate(" + margin.left + "," + + ")");

In this case, the svg variable refers to a translated group. However, when you later reselect, you actually append to the root SVG element:

  let svg ='.svgPlot');

This is the origin of the difference.

Related Query

More Query from same tag