antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.08k stars 1.58k forks source link

多view的同步缩放平移问题 #4351

Closed yobett closed 1 year ago

yobett commented 1 year ago

一个chart中包含多个view,这些view的x轴是相同的,如何让这些view同步进行平移/缩放呢? 我基于示例 https://g2.antv.vision/zh/examples/candlestick/candlestick#k-and-column 做了点修改(代码 https://gist.github.com/yobett/da2f2298dc102ced8ca4926e7924a512 ):

import DataSet from '@antv/data-set';
import { Chart, registerInteraction } from '@antv/g2';

registerInteraction("drag-move", {
  start: [{ trigger: "plot:mousedown", action: "scale-translate:start" }],
  processing: [
    {
      trigger: "plot:mousemove",
      action: "scale-translate:translate",
      throttle: { wait: 50, leading: true, trailing: false },
    },
  ],
  end: [{ trigger: "plot:mouseup", action: "scale-translate:end" }],
});

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/candle-sticks.json')
  .then(res => res.json())
  .then(data => {
    // ...
    chart.scale({
      time: {
        type: 'time',
        key: true,
        sync: true,
        // ...
      },
      // ...
    });
    // ...

    const kView = chart.createView({
      region: {
        start: { x: 0, y: 0 },
        end: { x: 1, y: 0.7 },
      },
      limitInPlot: true
    });
    // ...
    const barView = chart.createView({
      region: {
        start: { x: 0, y: 0.7 },
        end: { x: 1, y: 1 },
      },
      limitInPlot: true
    });
    // ...

    kView.interaction("view-zoom");
    kView.interaction("drag-move");
    barView.interaction("view-zoom");
    barView.interaction("drag-move");

    chart.render();
  });

做的修改如下:

问题如下:

有什么简便方法能让多个view在1个轴(或2个轴)方向同步缩放和平移呢?

yobett commented 1 year ago

重复 #3473