G6.TimeBar

[yinglcs]

问题描述

1、timeBar 设置 type: 'tick',播放控制controllerCfg配置无生效； 2、graph画布changeData后，当前timeBar是在播放状态，渲染就会出错； 以上都是vue+G6

重现链接

https://g6.antv.vision/zh/examples/tool/timebar#timebar

重现步骤

https://g6.antv.vision/zh/examples/tool/timebar#timebar

预期行为

1、timeBar 能有个重新初始化的功能，changeData的画布的时候，可以进行update； 2、timeBar api 参数配置controllerCfg 生效

平台

操作系统: [Windows] 网页浏览器: [Google ] G6 版本: [4.6.15 ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

请给出最简在线复现 demo

[yinglcs]

请给出最简在线复现 demo

[yinglcs]

第二个问题的复现过程： 1、引入timeBar image 2、初始化并渲染画布 image 3、点击时间轴播放按钮 4、在时间轴播放的条件下，调用graph.changeData（data2）切换另一个数据，会出现时间轴的渲染就会出错，无法重新更新到时间轴，如果是停止的状态下，则不会。

期望：是否能提供一个刷新时间轴的事件或者停止时间轴播放的事件入口。

<template>
  <div id="container" style="width: 500px;height: 500px"></div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  mounted() {
    const data = {
      nodes: [],
      edges: [],
    };

    for (let i = 0; i < 100; i++) {
      const id = `node-${i}`;
      data.nodes.push({
        id,
        date: `2020${i}`,
        value: Math.round(Math.random() * 300),
      });

      data.edges.push({
        source: `node-${Math.round(Math.random() * 90)}`,
        target: `node-${Math.round(Math.random() * 90)}`,
      });
    }

    const container = document.getElementById('container');
    var MyDiv =document.getElementById("MyDiv");
    var bt =document.createElement("button");           //createElement生成button对象
    bt.innerHTML = 'changeData 数据为data2 ';
    bt.onclick = function () {                          //绑定点击事件
      const data2 = {
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 200,
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
          },
          {
            id: 'node3',
            x: 300,
            y: 300,
          },
        ],
        edges: [
          {
            id: 'edge1',
            target: 'node2',
            source: 'node1',
          },
        ],
      };
      const timeBarData = [];
      for (let i = 0; i < 10; i++) {
        timeBarData.push({
          date: `2020${i}`,
          value: Math.round(Math.random() * 300),
        });
      }
      graph.changeData(data2);

    };
    container.appendChild(bt);
    const width = container.scrollWidth;
    const height = (container.scrollHeight || 500) - 100;
    const timeBarData = [];

    const nodeSize = 20;

    for (let i = 0; i < 100; i++) {
      timeBarData.push({
        date: `2020${i}`,
        value: Math.round(Math.random() * 300),
      });
    }

    const timebar = new G6.TimeBar({
      x: 0,
      y: 0,
      width,
      height: 150,
      padding: 10,
      type: 'trend',
      trend: {
        data: timeBarData,
      },
    });

// constrained the layout inside the area
    const constrainBox = { x: 10, y: 10, width: 580, height: 450 };

    const onTick = () => {
      let minx = 99999999;
      let maxx = -99999999;
      let miny = 99999999;
      let maxy = -99999999;
      let maxsize = -9999999;
      data.nodes.forEach((node) => {
        if (minx > node.x) {
          minx = node.x;
        }
        if (maxx < node.x) {
          maxx = node.x;
        }
        if (miny > node.y) {
          miny = node.y;
        }
        if (maxy < node.y) {
          maxy = node.y;
        }
      });
      const scalex = (constrainBox.width - nodeSize / 2) / (maxx - minx);
      const scaley = (constrainBox.height - nodeSize / 2) / (maxy - miny);
      data.nodes.forEach((node) => {
        node.x = (node.x - minx) * scalex + constrainBox.x;
        node.y = (node.y - miny) * scaley + constrainBox.y;
      });
    };

    const graph = new G6.Graph({
      container: 'container',
      width,
      height,
      linkCenter: true,
      plugins: [timebar],
      layout: {
        type: 'force',
        preventOverlap: true,
        onTick,
      },
      defaultNode: {
        size: nodeSize,
        type: 'circle',
        style: {
          fill: '#DEE9FF',
          stroke: '#5B8FF9',
        },
      },
      modes: {
        default: ['drag-node'],
      },
    });
    graph.data(data);
    graph.render();

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight - 100);
      };
  }
}
</script>