代码之家 › 专栏 › 技术社区 › parliament

D3缩放-在拖动和平移之间切换时视图跳跃

d3.js

parliament · 技术社区 · 5 年前

这是一个密码笔: https://codepen.io/parliament718/pen/BaNQPXx

Y轴可以拖动它来重新缩放。

问题是,如果我拖动/重新缩放它,然后平移图表,就会出现不需要的“跳跃”。

我不知道如何保持我的两个缩放行为同步。


const zoom = d3.zoom()
  .on('zoom', () => {
    const t = d3.event.transform;
    x.domain(t.rescaleX(x2).domain());
    y.domain(t.rescaleY(y2).domain());
    render();
  });

const yAxisZoom = d3.zoom()
  .on('zoom', () => {
    y.domain(d3.event.transform.rescaleY(y2).domain());
    render();
  });

const yAxisDrag = d3.drag()
  .on('drag', () => {
    const factor = Math.pow(2, -d3.event.dy * 0.01);
    d3.select('#zoom-chart .plot-area').call(yAxisZoom.scaleBy, factor);
  });