D3 v7编程式平移时MouseEvent变换属性未生效问题咨询

安全阿岳

2026-7-21

D3FC图表鼠标平移时transform.x值异常问题

场景概述

我有两种图表平移方式：鼠标拖拽或按钮点击（固定步长平移）。

Canvas定义

this.canvas = d3.select('#chart')
    .datum(displayData)
    .call(this.chart);

图表实例定义

this.chart = chartCartesian(this.xScale, d3.scaleLinear())
    .webglPlotArea(this.barSeries)
    .xDomain(this.xScale.domain())
    .decorate(context =>
        context
            .call(this.zoom)
            .call(pointer)
    );

按钮点击触发的编程式平移代码

this.canvas.transition().call(
   this.zoom.transform,
   this.transform(direction)
);

transform函数实现

d3.zoomIdentity
  .translate(position, 0)
  .scale(/* current transform.k set in chart's zoomFn */);

Zoom行为定义（执行正常）

this.zoom = d3
   .zoom()
   .scaleExtent([1, this.timeFrameInS])
   .translateExtent([[0, 0], [this.webglService.canvasWidth$.value, this.webglService.canvasHeight$.value]])
   .extent([[0, 0], [this.webglService.canvasWidth$.value, this.webglService.canvasHeight$.value]])
   .on('zoom', event => {
      this.xPos = Math.trunc(event.transform.x);
      this.zoomEvent = event;
   });