d3鼠标事件，单击时添加圆圈

function dragstarted(event, d) {
  d3.select(this).raise().attr("stroke", "black");
}

function dragged(event, d) {
  d3.select(this).attr("cx", d.x = event.x).attr("cy", d.y = event.y);
}

function dragended(event, d) {
  d3.select(this).attr("stroke", null);
}

const drag = d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended);

const height = 300,
  width = 700,
  maxRadius = 20;

const circles = d3.range(10).map(i => ({
  x: Math.random() * (width - maxRadius * 2) + maxRadius,
  y: Math.random() * (height - maxRadius * 2) + maxRadius,
  radius: Math.random() * (maxRadius - 2) + 2,
}));

const svg = d3.select("svg")
  .attr("viewBox", [0, 0, width, height])
  .attr("stroke-width", 2)
  .on("click", (event) => {
    console.log(event);
    circles.push({
      x: event.clientX,
      y: event.clientY,
      radius: Math.random() * (maxRadius - 2) + 2,
    });
    drawCircles();
  })

function drawCircles() {
  svg.selectAll("circle")
    .data(circles)
    .join("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", d => d.radius)
    .attr("fill", (d, i) => d3.schemePastel1[i % 9])
    .call(drag);
}

drawCircles();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg></svg>