g6学习笔记二(元素）

最新推荐文章于 2024-05-23 20:56:45 发布

一个金牛座的前端

最新推荐文章于 2024-05-23 20:56:45 发布

阅读量1.1k

点赞数

分类专栏： g6 文章标签：学习

本文链接：https://blog.csdn.net/vue6214/article/details/128458415

版权

g6 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

g6提供了提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。

元素：节点、边、节点分组 Combo，元素属性：样式属性、其他属性

每一个元素是一个 item 实例，而实例中的数据模型 model 定义了该元素的样式、配置

1.数据结构（配置项）

元素共有数据结构（配置项）（id，style，type，label，labelCfg）

节点的数据结构（配置项）

{
  //继承元素属性

  id: 'node0',          // 元素的 id
  type: 'circle',       // 元素的图形
  style: {              // 元素样式
    fill: '#000',       // 样式属性，元素的填充色
    stroke: '#888',     // 样式属性，元素的描边色
    // ...              // 其他样式属性
  },
  label: 'node0'        // 标签文字
  labelCfg: {           // 标签文字配置属性
    positions: 'center',// 标签文字在元素中的位置
    style: {            // 标签文字样式
      fontSize: 12      
      // ...            
    }
  },

  //节点私有属性

  x: '',                //x 坐标
  y: '',                //y 坐标
  size: 40,             // 元素的大小
              

}

边的数据结构（配置项）

与节点的数据结构相似，添加source和target字段，代表起始和终止节点的 id。

{
  //继承元素属性

  id: 'edge0',          // 边的 id
  type: 'line',         // 边的图形
  style: {              // 边样式             
  },
  label: 'node0'        // 边文字
  labelCfg: {           // 文字配置属性
    positions: 'center',
    style: {            
      fontSize: 12      
      // ...            
    }
  },

  //边私有属性

  source: '',           //起始点 id 
  target: '',           //结束点 id 
  sourceAnchor: '',     //边的起始节点上的锚点的索引值。
  targetAnchor: ''        //边的终止节点上的锚点的索引值。
}

combo的数据结构（配置项）

{
  //继承元素属性

  id: 'node0',          // 元素的 id
  type: 'circle',       // 元素的图形
  style: {              // 元素样式
    fill: '#000',       // 样式属性，元素的填充色
    stroke: '#888',     // 样式属性，元素的描边色
    // ...              // 其他样式属性
  },
  label: 'node0'        // 标签文字
  labelCfg: {           // 标签文字配置属性
    positions: 'center',// 标签文字在元素中的位置
    style: {            // 标签文字样式
      fontSize: 12      
      // ...            
    }
  },

  //Combo私有属性

  parentId: '',         //该 Combo 的父 Combo 的 ID
  size: '',             //Combo 的最小大小
  padding: ''           //该 Combo 内边距。     

}