使用Cypress测试d3.js 2D图表圆点拖拽功能不生效如何解决

问题根因 #

• 你设置的clientX:3000、clientY:5000超出了常规页面视口/ SVG画布范围，d3拖拽逻辑会直接忽略无效坐标
• D3 v6及后续版本的拖拽事件默认监听pointerdown/pointermove/pointerup系列事件，你触发的mouse系列事件未被d3拖拽回调捕获
• 缺少初始位置校验：拖拽需要先匹配圆点本身的坐标作为起点，直接跳转到大跨度坐标会被d3判定为无效操作

解决方案 #

方案1：适配D3 v6+的pointer事件方案（优先推荐）

cy.get('#MYID').then($circle => {
  // 读取圆点当前原始坐标
  const initialX = +$circle.attr('cx');
  const initialY = +$circle.attr('cy');
  // 自定义目标位移坐标，不要超出SVG画布范围
  const targetX = initialX + 100;
  const targetY = initialY + 50;

  cy.wrap($circle)
    .trigger('pointerdown', {
      pointerId: 1,
      button: 0,
      clientX: initialX,
      clientY: initialY,
      force: true
    })
    // 触发小幅度移动唤醒拖拽逻辑
    .trigger('pointermove', {
      pointerId: 1,
      clientX: initialX + 10,
      clientY: initialY + 10,
      force: true
    })
    // 移动到目标坐标
    .trigger('pointermove', {
      pointerId: 1,
      clientX: targetX,
      clientY: targetY,
      force: true
    })
    .trigger('pointerup', { pointerId: 1, force: true });
  
  // 可选：验证位移结果
  cy.wrap($circle).should('have.attr', 'cx', targetX.toString());
  cy.wrap($circle).should('have.attr', 'cy', targetY.toString());
})

方案2：适配低版本D3的鼠标事件方案

cy.get('#MYID').then($circle => {
  const initialX = +$circle.attr('cx');
  const initialY = +$circle.attr('cy');
  const targetX = initialX + 100;
  const targetY = initialY + 50;

  cy.wrap($circle)
    .trigger('mousedown', {
      which: 1,
      clientX: initialX,
      clientY: initialY,
      force: true
    })
    .trigger('mousemove', {
      clientX: initialX + 10,
      clientY: initialY + 10,
      force: true
    })
    .trigger('mousemove', {
      clientX: targetX,
      clientY: targetY,
      force: true
    })
    .trigger('mouseup', { force: true });
})

注意事项 #

• 如果你的SVG添加了transform缩放/平移属性，需要将目标坐标对应乘以缩放比例、叠加平移偏移量后再传入
• 目标坐标不要设置到SVG画布可视范围外，否则d3会自动修正坐标到画布边界，看起来没有位移

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