如何在d3 v5中为两个不同的列绘制圆形？

// 1. 创建SVG容器
const svg = d3.select("#container")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 2. 准备数据
const data1 = [10, 20, 30, 40, 50];
const data2 = [5, 15, 25, 35, 45];

// 3. 创建比例尺
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data1.concat(data2))])
  .range([0, 400]);

// 4. 创建圆形
const circles1 = svg.selectAll(".circle1")
  .data(data1)
  .enter()
  .append("circle")
  .attr("class", "circle1")
  .attr("cx", (d) => xScale(d))
  .attr("cy", 100)
  .attr("r", 10)
  .attr("fill", "red");

const circles2 = svg.selectAll(".circle2")
  .data(data2)
  .enter()
  .append("circle")
  .attr("class", "circle2")
  .attr("cx", (d) => xScale(d))
  .attr("cy", 200)
  .attr("r", 10)
  .attr("fill", "blue");

// 5. 更新圆形
data1[0] = 15;
circles1.data(data1)
  .attr("cx", (d) => xScale(d));

// 6. 删除圆形
data2.pop();
circles2.data(data2)
  .exit()
  .remove();