Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

节点属性配置一致,有的labelShape的文本内容显示,有的被隐藏 #5488

Open
zhangsai521314 opened this issue Mar 4, 2024 · 1 comment

Comments

@zhangsai521314
Copy link

zhangsai521314 commented Mar 4, 2024

问题描述

V5节点属性配置一致,有的labelShape的文本内容显示,有的被隐藏

重现链接

https://g6-next.antv.antgroup.com/examples/item/defaultNodes#modelRect

重现步骤

进入:https://g6-next.antv.antgroup.com/examples/item/defaultNodes#modelRect
将项目的代码粘入运行:
`import { Graph, Extensions, extend } from '@antv/g6';

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;

const ExtGraph = extend(Graph, {
nodes: {
'modelRect-node': Extensions.ModelRectNode,
},
});
const graph = new ExtGraph({
container: container, // 指定挂载容器
width: width, // 图的宽度
height:height, // 图的高度
// //功能控制
modes: {
default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
},

  data: {
    nodes: [
      {
        id: 'diaodufuwu1',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_fuwuqi',
          x: 580,
          y: 50,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6ec', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '调度服务器(主)',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'diaodufuwu2',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_fuwuqi',
          x: 860,
          y: 50,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6ec', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '调度服务器(备)',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'zhinengwang1',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_fuwuqi',
          x: 1140,
          y: 50,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e5', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '智能网服务器(主)',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'zhinengwang2',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_fuwuqi',
          x: 1420,
          y: 50,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e5', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '智能网服务器(备)',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'luyinfuwuqi',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_fuwuqi',
          x: 1700,
          y: 50,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e0', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '录音服务器',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },

      {
        id: 'd0',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1140,
          y: 190,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e3', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '调度台',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },

      {
        id: 'd1',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 430,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '马瑞巴亚港',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd2',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 714,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '穆萨亚',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd3',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 998,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '科里巴',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd4',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1282,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '卡萨',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd5',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1566,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '乌尔卡巴',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd6',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1850,
          y: 270,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '蒙加塔',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },

      {
        id: 'd7',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 430,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '法拉纳',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd8',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 714,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '杜瓦科',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd9',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 998,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '尼亚林科',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd10',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1282,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '迪安库亚',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd11',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1566,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '凯鲁阿内',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
      {
        id: 'd12',
        data: {
          type: 'modelRect-node',
          parentId: 'combo_diaodutai',
          x: 1850,
          y: 350,
          keyShape: {
            width: 270,
            height: 70,
          },
          // iconShape: {
          //   // 自定义字体名称需要设置不然iconfont显示不了,fontFamily 必须和 iconfont.css 里面的 font-family 保持一致!!!!!!!!!
          //   fontFamily: 'iconfont',
          //   opacity: 0.8,
          //   fill: 'green',
          //   show: true,
          //   text: '\ue6e4', //text属性 为 iconfont.css 中的content ,记得在斜线后加u
          //   width: 40,
          //   height: 40,
          //   cursor: 'pointer',
          //   offsetX: -110,
          // },
          labelShape: {
            text: '西芒杜矿山',
            fontSize: 18,
            offsetX: 2,
            position: 'bottom',
            maxWidth: '0',
            //maxLines: 2,
          },
          otherShapes: {
            //竖线状态
            preRect: {
              show: false,
              fill: '#5CAAF8',
              width: 5,
              radius: 10,
            },
            description: {
              show: false,
              text: '描述',
              fontSize: 20,
              offsetX: 0,
              offsetY: 0,
            },
            //左边图标
            logoIcon: {
              show: true,
              img: '',
              text: '1',
              width: 30,
              height: 30,
              offsetX: 0,
              offsetY: 0,
            },
            //左边状态图标
            stateIcon: {
              show: false,
              img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
              width: 16,
              height: 16,
              offsetX: -10,
              offsetY: 0,
            },
          },
        },
      },
    ],
     edges: [
       {
         id: 'combo_fuwuqi_combo_diaodutai',
         source: 'combo_fuwuqi',
         target: 'combo_diaodutai',
         data: {},
       },
     ],
     combos: [
       {
         id: 'combo_fuwuqi',
         data: {
           type: 'rect-combo',
           keyShape: {
             //上、
             padding: [10, 10, 10, 10],
           },
         },
       },
       {
         id: 'combo_diaodutai',
         data: {
           type: 'rect-combo',
           keyShape: {
             //上、
             padding: [10, 10, 10, 10],
           },
         },
       },
     ],
  },
});

window.graph = graph;`

预期行为

节点属性一致,显示的效果应该一致

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

图片

补充说明(可选)

No response

@zhangsai521314
Copy link
Author

解决方式:通过https://g6-next.antv.antgroup.com/examples/interaction/zoomAndAutoLod#autoLod 示列解决
plugins: [
// Plugin LodController is default and built-in added in G6, and the default configuration is: { disabledLod: false, numberPerCell: 1 }
{
type: 'lod-controller',
disableLod: true ,
numberPerCell: 2,
},
]
主要由:disableLod控制

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant