zoukankan      html  css  js  c++  java
  • antv/G6 琐碎点

    • fitView
      fitView :为了能够将超出画布的图适配到视野中,在实例化图时使用了 fitView 配置项
    const graph = new G6.Graph({
      // ...
         fitView: true,
      // fitViewPadding: [ 20, 40, 50, 20 ]
    });
    

    复杂的布局系统会打破适配的规则,所以去掉

    • type: 'force',即经典力导向图布局。preventOverlap: true` ,表示希望节点不重叠。

    • 布局modes

    modes: {
                 default: [
                        'drag-canvas', 'drag-node', 'zoom-canvas',] //拖拽画布,拖拽节点,缩放画布 
    }
    

    type: 'force',即经典力导向图布局。preventOverlap: true ,表示希望节点不重叠。

    边动画 type加在默认边上

    defaultEdge: {
    
                 type: 'circle-running', //
    }
    

    linkDistance 属性用来指定布局的时候边的距离长度:

    const graph = new G6.Graph({
      // ...
      layout: {
        type: 'force',
        preventOverlap: true,
        linkDistance: 100, // 指定边距离为100
      },
    });
    

    节点样式调整

    文档

    • 样式默认为圆形,circle
      defaultNode:{
          type:'modelRect'    //卡片
      }
    

    样式详解

    名称 描述
    circle 圆形
    rect 矩形
    ellipse 椭圆
    diamond 菱形
    triangle 三角形
    star 星形
    image 图片
    modelRect 卡片
    donut 圆形

    标签文本label配置

    文本默认是在节点中间,但是被要求弄在节点下面,扒拉了下文档还真找到了

    名称 是否必须 类型 备注
    position false String 文本相对于节点的位置,目前支持的位置有:'center''top''left''right''bottom'。默认为 'center'。modelRect 节点不支持该属性
    offset false Number 文本的偏移,position'bottom' 时,文本的上方偏移量;position'left' 时,文本的右方偏移量;以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距
    style false Object 标签的样式属性。

    示例;

    const graph = new G6.Graph({
      container: 'mountNode',
       800,
      height: 600,
      defaultNode: {
        // ... 其他属性
        label: 'node-label',
        labelCfg: {
          position: 'bottom',
          offset: 10,
          style: {
            fill: '#666',
          },
        },
      },
    });
    
  • 相关阅读:
    excel 2003系列
    DataTab转换XML XML转换DataTable 的类[转]
    全角转半角与半角转全角
    Day2
    Day6 && Day7图论
    Day1
    Android为何以及如何保存Fragment实例
    Android应用的本地化及知识拓展之配置修饰符
    Leetcode NO.136 Single Number 只出现一次的数字
    经典排序算法(四) —— Quick Sort 快速排序
  • 原文地址:https://www.cnblogs.com/wszzj/p/15090187.html
Copyright © 2011-2022 走看看