antv G6 实践踩坑，插件，时间轴，撤销回退，修改样式

米哈兔兔魔

已于 2023-06-01 17:41:36 修改

阅读量2.6k

点赞数 2

分类专栏： G6 文章标签： vue.js

于 2023-06-01 09:53:55 首次发布

本文链接：https://blog.csdn.net/qq_40453669/article/details/130973137

版权

G6 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了在使用G6图形库过程中遇到的问题及解决方案，包括检查图渲染错误、使用G6.Util.processParallelEdges时的边类型冲突，以及如何实现撤销回退功能。还探讨了G6的Tooltip设置、自定义Combo和Node的响应事件，以及时间轴的创建和数据更新。同时，提出了多条边合并为一条线的实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结：多看案例，遇到图渲染不出来的，检查语法错误，控制台不一定会报错，找不出的话就回退代码，一次不要写太多的代码才看效果。历经一个多月的奋斗，修修改改，G6的大部分功能都有实践到，如果还有没有写到的，欢迎评论区留言交流或者私信我。语法用的是vue2+antv

当使用了G6.Util.processParallelEdges 时是否无法使用‘边自定义’功能了：原因是边类型冲突了，需要将边类型改为边自定义类型。G6

const offsetDiff = 40;   // 节点间多条线间距
const multiEdgeType = 'circle-running1';
const singleEdgeType = 'circle-running'    //circle-running 自定义边动画 
G6.Util.processParallelEdges(edges,offsetDiff,multiEdgeType,singleEdgeType)

2. 撤销回退功能：只能使用官方提供的 new G6.ToolBar来编写撤销回退功能，自己写的话很麻烦，需要监听各类事件，如果需要自定义工具栏，可以将工具栏覆盖在自定义的工具栏上。G6

这里提一个小坑，用官方自定义的工具栏需要严格按照他的格式使用ul-li，否则没有效果。

<div id="toolbar" >
    <ul v-if="isShowToolbar">
      <li code='undo'>
        <span role="img" class="anticon"
          ><svg width="2.2em" height="2.2em" fill="currentColor" aria-hidden="true" focusable="false" class="">
            <use xlink:href="#icon-undo">use>svg>span
        >
        <span class="tool_text">Undospan> li> <li code='redo'> <span role="img" class="anticon" ><svg width="2.2em" height="2.2em" fill="currentColor" aria-hidden="true" focusable="false" class=""> <use xlink:href="#icon-redo">use>svg>span > <span class="tool_text">Redospan> li> ul> div>

3 . new G6.Tooltip：可以设置需要提示框的类型 itemTypes: ['node', 'edge', 'combo']，e.item.getType() === 'node' 也可以根据不同类型显示不同的内容。加点击事件：

outDiv.innerHTML = `
    ${model.tooltip}
    <svg
      class="icon copy-text"
      aria-hidden="true"
    >
      <use xlink:href="#icon-fuzhi1">use>
    svg>
`;
outDiv.addEventListener('click',function(){
    _that.copy(model.tooltip)
});

4. G6.registerCombo ：自定义的combo响应事件可以在afterUpdate 中编写，并监听点击事件。如果需要编写展开收起关闭效果，自定义关闭按钮需要动态修改其x,y位置。内置的方法更换不了图片，需要自定义，在afterUpdat 中编写更换图片

afterUpdate: function afterUpdate(cfg, combo) {
          const group = combo.get('group');
          const rightCircle = group.find((ele) => ele.get('name') === 'right-circle');
          const rightText = group.find((ele) => ele.get('name') === 'right-text');                
        rightText.attr('img', cfg.collapsedSubstituteIcon.img);
        rightCircle.attr('opacity',1)     
        rightCircle.attr('x',custom.cfg.attrs.x + 48)
        rightCircle.attr('y',custom.cfg.attrs.y - 8)                           
        rightText.attr('opacity',1)
},
this.graph.on('combo:click', (evt) => {
      const { item,target } = evt;
      this.comboId = item._cfg.id
      let combo = this.graph.findById(this.comboId);
      if(target.cfg.name == 'right-circle' ){
        combo.update({   //合并为图标
          fixCollapseSize:[20,30],
            collapsed: true,
            padding: [15, 20, 15, 20],
            collapsedSubstituteIcon: {
              show: true,
              img: data.icon,
              width: 40,
              height: 40
            },        
        });
        this.graph.expandCombo(this.comboId)
        this.graph.updateCombos();
      }   
    });

5. G6.registerNode：自定义节点的样式修改和响应事件，很多自定义的内容修改都需要在自定义方法里面进行修改，因为正常修改没有效果

G6.registerNode('custom-node', {
      draw(cfg, group) {},
      update(cfg, node) {
        // 若未指定registerNode的第三个参数并且未定义update方法时，则节点更新时会执行 draw 方法，所有图形清除重绘
        if (cfg.attrs) {
        // 获取自定义的点方式自选
          let custom = node.get('group').cfg.children  
          // 底部lable
          if(cfg.attrs.textColor){
            custom[2].attr('fill', cfg.attrs.textColor);
         }
     },
     // 设置响应
     setState(name, value, item) {
        const circle = item.get('group').find((element) => element.get('name') === 'circle');
        if (name === 'selected') {
          if (value) {
            circle.attr('lineWidth',5)
          } else {
            circle.attr('lineWidth',1)
          }
        }
     },
}),

this.graph.updateItem(node, { 
    style: { fontSize } 
}, true);

6. 时间轴：点击按钮出现时间轴可以用新增插件的方法，并且在趋势图中添加柱状图。时间轴的数据格式，节点中也需要增加date属性，并且需要和时间轴date格式相同，才能用内置的筛选功能，不同的时间轴类型需要的date格式不一样。坑点：如果时间轴出不来，仔细阅读官方文档，观察数据格式问题。时间轴数据的动态更新怎么做，官方没有提供相关的方法，我是先销毁，再创建来实现的。

if(this.timeBar) this.timeBar.destory()
this.timeBarData=[{date:'2010-10-9',value: 12}]
this.timeBar = new G6.TimeBar({
        x: 0,
        y: 0,
        width,
        height: 150,
        padding: 10,
        type: 'trend',
        trend: {
          data: this.timeBarData,
          interval: { 
            data: this.timeBarData.map(item => item.value), // 设置为你的柱状图数据
            style: {
              stroke: '#1890ff',
              fill: '#1890ff', // 设置柱状图颜色,
              barWidth: 20    // 设置柱状图宽度
            },
          }
        },
        changeData: false,
        rangeChange(graph, minValue, maxValue){
        // 自定义节点的隐藏显示
          const nodes = graph.cfg.nodes
          const min = Number(minValue.split('-').join(''))
          const max = Number(maxValue.split('-').join(''))
          nodes.forEach(node=>{
            let time = node.getModel().date
            let num = Number(time.split('-').join(''))
            if( min <= num && num <= max) {
              that.graph.showItem(node);
            }else{
              that.graph.hideItem(node);
            }
          })
        },
        
      });
      this.graph.addPlugin(this.timeBar);

7. 实现两个节点间3条以上连线合并为一条线，3条以下分开展示：我用的办法比较笨代码非常多，如果有更好的，欢迎交流。所以只能提供思路：创建前预处理数据（知晓两个节点间的连线数）- 创建节点时判断当前是第几条连线，动态给弧度数 - 渲染完成之后，修改边类型，3条以上和一条连线为line，其他的为 quadratic 类型。