antv G6 如何在websocket推送数据下实时更新渲染

• Z时代
• 2024-02-12
• 分类：IT

代码如下

<template>
  <div id="app">
    <!--antv G6 demo -->
    <div id="container"></div>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
import G6 from '@antv/g6'
import data from '@/plugins/antv'
export default {
  name: 'gpolyline',
  data() {
    return {
      msg: '',
    }
  },
  created() {},
  mounted() {
    this.$socket.connect()
    this.getInit(data)
  },
  sockets: {
    disconnect() {
      console.log('连接断开')
    },
    connect_failed() {
      console.log('连接失败')
    },
    connect() {
      console.log('连接成功')
    },
    kline(msg) {
      console.log('msg', msg)
      this.msg = msg
    },
  },
  methods: {
    getInit(data) {
      const graph = new G6.Graph({
        container: 'container',
        width: 1000,
        height: 700,
        modes: {
          default: ['drag-canvas', 'zoom-canvas'], //'click-select'
        },
        // 节点类型及样式
        defaultNode: {
          type: 'rect',
          size: [150, 50],
          style: {
            fill: '#fff',
            stroke: '#f00',
            lineWidth: 2,
          },
        },
        // 连线类型及样式
        defaultEdge: {
          type: 'polyline',
          style: {
            stroke: '#f00',
            offset: 25,
            endArrow: false,
            lineWidth: 2,
          },
        },
      })
      graph.data(data)
      graph.render()
    },
  },
  beforeRouteLeave(to, from, next) {
    this.$socket.disconnect()
    next()
  },
}
</script>
<style>
#container {
  width: 100%;
  height: 100%;
  border: 1px saddlebrown solid;
}
</style>

页面首次加载出来：

初始化时data的数据

const data = {
  nodes: [
    {
      id: "node1",
      x: 700,
      y: 100,
      size: [60, 100],
      label: "node1\n换行21",
      anchorPoints: [
        [0.5, 1],
        [0, 0.5]
      ]
    },
    {
      id: "node2",
      x: 700,
      y: 200,
      label: "222",
      anchorPoints: [
        [0.5, 1],
        [0.5, 1]
      ]
    },
  ],
  // 边集
  edges: [
    {
      source: "node1",//源头
      target: "node2",//目标
      type: "line",
      sourceAnchor: 0,
      // 该边连入 target 点的第 0 个 anchorPoint，
      targetAnchor: 0
    },
  ]
};
export default data

webscoket 推送过来的数据在页面打印出来了 antv G6绘制的图，
在

kline(msg) {
   console.log('msg', msg)
   this.msg = msg
},

拿到了数据 如何实时更新，第一次使用antv G6 哪位熟练的大佬指点下 谢谢

回答：

回答：

官网 API: graph.changeData()
https://antv-g6.gitee.io/zh/d...

开发大致思路:
1, 实例化

graph = new G6.Graph()

2, 更新数据

socket.on('connect', ({ nodes, edges }) => {
    graph.changeData({ nodes, edges });
});

3, 事件绑定

graph.on('click', e => {
    // do something
    if(e.item.getModel().id === 'node1') {
    }
});

以上是 antv G6 如何在websocket推送数据下实时更新渲染 的全部内容， 来源链接： utcz.com/p/937092.html