d3.js -添加缩放和平移可防止拖动节点

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

// 创建一个包含节点的数据集
var nodes = [
  { id: 1, x: 100, y: 100 },
  { id: 2, x: 200, y: 200 },
  { id: 3, x: 300, y: 300 }
];

// 创建节点的圆形表示
var circles = svg.selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .style("fill", "blue");

// 创建缩放和平移行为
var zoom = d3.zoom()
  .scaleExtent([0.5, 2]) // 设置缩放范围
  .on("zoom", function() {
    // 缩放和平移节点
    circles.attr("transform", d3.event.transform);
  });

// 将缩放和平移行为应用到SVG容器上
svg.call(zoom);