尝试使用画笔/缩放功能在d3图表中使用散点图

// 准备数据
var data = [
  { x: 10, y: 20 },
  { x: 30, y: 40 },
  { x: 50, y: 60 },
  // 更多数据...
];

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 定义比例尺
var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.x; })])
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.y; })])
  .range([400, 0]);

// 绘制散点
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(d.x); })
  .attr("cy", function(d) { return yScale(d.y); })
  .attr("r", 5)
  .attr("fill", "blue");

// 添加交互效果
svg.selectAll("circle")
  .on("mouseover", function(d) {
    // 鼠标悬停时的操作
    d3.select(this).attr("fill", "red");
  })
  .on("mouseout", function(d) {
    // 鼠标移出时的操作
    d3.select(this).attr("fill", "blue");
  });