D3.js中拖拽点时更新多边形的实现求助

嘿，我瞅了你的问题——你在调试D3.js的多边形功能，初始绘制正常，但拖拽顶点时没法更新多边形，这个坑我之前踩过，给你理几个关键的解决方向：

1. 核心问题：没把数据更新和视图更新绑定起来 #

D3是数据驱动视图的，所以你得确保拖拽时先更新顶点的坐标数据，再触发多边形视图的重绘。很多时候问题出在：要么拖拽时没改数据，要么改了数据但没调用更新视图的逻辑。

2. 拖拽事件里的正确操作 #

你需要在拖拽的drag事件处理函数里做三件事：

• 更新当前拖拽顶点的x/y值；
• 更新顶点自身的显示位置；
• 调用专门的多边形更新函数，让多边形跟着数据变。

比如这样写：

const dragHandler = d3.drag()
  .on('drag', function(event, d) {
    // 第一步：更新对应顶点的数据
    d.x = event.x;
    d.y = event.y;
    // 第二步：更新顶点自身的位置
    d3.select(this)
      .attr('cx', d.x)
      .attr('cy', d.y);
    // 第三步：触发多边形更新
    updatePolygon();
  });

// 给顶点绑定拖拽事件
svg.selectAll('.vertex')
  .data(polygonPoints)
  .call(dragHandler);

3. 写一个专门的多边形更新函数 #

别把初始化和更新逻辑混在一起，抽一个函数专门负责多边形的视图更新，这样初始化和拖拽时都能复用：

function updatePolygon() {
  // 把顶点数据转换成polygon需要的points字符串格式："x1,y1 x2,y2 ..."
  const pointsStr = polygonPoints.map(point => `${point.x},${point.y}`).join(' ');
  
  // 选择已有的多边形元素，更新它的points属性
  svg.select('.polygon-shape')
    .attr('points', pointsStr);
}

4. 避坑提醒：别重复创建多边形 #

如果你的初始化代码用了append('polygon')，那更新的时候一定要用select('.polygon-shape')去选择已有的元素，而不是再append一次——不然会叠加一堆多边形，旧的还留在那，看起来就像没更新一样。

简化示例代码 #

把这些思路整合起来，一个能正常拖拽更新的简化版本大概是这样：

// 初始顶点数据
const polygonPoints = [
  {x: 150, y: 100},
  {x: 250, y: 100},
  {x: 300, y: 200},
  {x: 200, y: 300},
  {x: 100, y: 200}
];

const svg = d3.select('svg')
  .attr('width', 400)
  .attr('height', 400);

// 初始化多边形
svg.append('polygon')
  .attr('class', 'polygon-shape')
  .attr('fill', '#a8d1ff')
  .attr('stroke', '#333')
  .attr('points', polygonPoints.map(p => `${p.x},${p.y}`).join(' '));

// 初始化拖拽顶点
svg.selectAll('.vertex')
  .data(polygonPoints)
  .enter()
  .append('circle')
  .attr('class', 'vertex')
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .attr('r', 6)
  .attr('fill', '#ff4444')
  .call(d3.drag()
    .on('drag', function(event, d) {
      d.x = event.x;
      d.y = event.y;
      d3.select(this)
        .attr('cx', d.x)
        .attr('cy', d.y);
      updatePolygon();
    })
  );

// 更新多边形函数
function updatePolygon() {
  const pointsStr = polygonPoints.map(p => `${p.x},${p.y}`).join(' ');
  svg.select('.polygon-shape').attr('points', pointsStr);
}

按照这个思路调整你的代码，应该就能解决拖拽更新的问题啦！

内容的提问来源于stack exchange，提问作者Chris Satchell