在D3.js中绘制点

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const data = [
  { x: 50, y: 50 },
  { x: 100, y: 100 },
  { x: 150, y: 150 }
];

const points = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", 5)
  .attr("fill", "blue");

points.attr("stroke", "black")
  .attr("stroke-width", 2)
  .on("mouseover", function(d) {
    d3.select(this).attr("fill", "red");
  })
  .on("mouseout", function(d) {
    d3.select(this).attr("fill", "blue");
  });