如何实现基于D3.js的Event Drops仅以中心为原点缩放？

Event Drops 底层依赖 D3.js 的 zoom 模块实现缩放，默认以鼠标位置为缩放原点，要改成图表中心，得自定义 zoom 的变换逻辑，具体步骤如下：

• 获取图表中心坐标
  先拿到图表容器的实际尺寸，计算中心位置：

  const chartContainer = d3.select('.eventdrops-chart');
  const { width, height } = chartContainer.node().getBoundingClientRect();
  const centerX = width / 2;
  const centerY = height / 2;
  

• 重写缩放事件处理逻辑
  Event Drops 实例暴露了 zoom() 方法可获取内部的 zoom 行为对象，我们需要替换默认的 zoom 事件处理，强制以中心为原点计算变换：

  // 假设已完成 Event Drops 初始化和渲染
  const eventDropsChart = eventDrops(yourDataConfig);
  d3.select('#target-container').call(eventDropsChart);
  
  // 获取内置的 zoom 行为
  const zoomBehavior = eventDropsChart.zoom();
  
  // 移除原有 zoom 事件，添加自定义处理
  zoomBehavior.on('zoom', null);
  zoomBehavior.on('zoom', function(event) {
      // 基于中心原点计算变换矩阵
      const baseTransform = d3.zoomIdentity
          .translate(centerX, centerY)
          .scale(event.transform.k)
          .translate(-centerX, -centerY);
      // 叠加平移量（保留拖拽功能）
      const finalTransform = baseTransform.translate(event.transform.x, event.transform.y);
  
      // 将变换应用到图表的坐标轴和事件组
      d3.select('.eventdrops-axis-group').attr('transform', finalTransform);
      d3.selectAll('.eventdrops-events-group').attr('transform', finalTransform);
  });
  

• 额外注意点

  • 必须等图表渲染完成后再执行上述代码，否则无法正确获取容器尺寸
  • 如果你的 Event Drops 版本绑定 zoom 的元素不是 .eventdrops-chart，可通过浏览器调试工具找到实际的缩放容器
  • 若需要限制缩放范围，可通过 zoomBehavior.scaleExtent([minScale, maxScale]) 设置

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