G6自定义复杂树图

最新推荐文章于 2024-05-16 14:57:22 发布

L_sixmoon

最新推荐文章于 2024-05-16 14:57:22 发布

阅读量1.5k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/L_sixmoon/article/details/126273150

版权

1.注册自定义节点

// 注册自定义节点
G6.registerNode(
  'flow-rect', // 节点名称，后续使用时用此名称
  {
    drawShape: function drawShape(cfg, group) {
      const rectConfig = {
        height: 110,
        lineWidth: 1,
        fontSize: 12,
        fill: '#fff',
        radius: 4,
        stroke: cfg.status ? '#EB2F96' : '#1890FF',
        opacity: 1,
      };
			// 节点添加方形
      const rect = group.addShape('rect', {
        attrs: {
          ...rectConfig,
        },
      });
      const { name = '', time, percent } = cfg;
       // 节点添加文本
      group.addShape('text', {
        attrs: {
          text: name, // 文本内容
          x: 0, // 横向坐标
          y: 0, // 纵向坐标
          textAlign: 'left',
          textBaseline: 'middle',
          fontSize: 16,
          fontWeight: 500,
          fill: '#666',
        },
      });
      ...
      ...
      .