镇江网站建设价格,企业自助建站软件,长沙网络营销工程师最新招聘信息,产品设计网址前言#xff1a;接本专栏上篇文章#xff0c;实现一个新需求#xff0c;如有不懂的可先去看新手教程
需求描述#xff1a;如何在节点旁添加多个标签#xff0c;如下图所示#xff1a; 实现该需求目前我只想到两种方法#xff1a;
方法一#xff1a;使用换行符将不同的…前言接本专栏上篇文章实现一个新需求如有不懂的可先去看新手教程
需求描述如何在节点旁添加多个标签如下图所示 实现该需求目前我只想到两种方法
方法一使用换行符将不同的标签连接在一起。这种方式简单但不够灵活。
方法二通过在节点的 attrs 中添加自定义 SVG 创建多个文本标签。你可以根据需要调整这些标签的位置和样式。
先简单说一下方法一就是在添加节点的label标签里直接使用换行符 这种方法太局限了只能适应简单的需求无法给标签加更多的设计
方法二添加自定义 SVG 标签
1、配置添加节点方法里面的ports之前我们只在节点上加了连接桩现在再加三个组展示新的标签
代码位置如下图 具体代码 ports: {groups: {group1: {position: [30, 30],},group2: {position: [0, 10],attrs: {circle: {r: 0, // 设定半径为0隐藏圆圈},},},group3: {position: [0, 20],attrs: {circle: {r: 0, // 设定半径为0隐藏圆圈},},},group4: {position: [0, 30],attrs: {circle: {r: 0, // 设定半径为0隐藏圆圈},},},},items: [{group: group1,id: port1,attrs: {circle: {r: 6,magnet: true,stroke: #ffffff,strokeWidth: 2,fill: #5F95FF,},},},{id: label1,group: group2,attrs: {text: {text: 标签1,fill: #333,fontSize: 12,},},},{id: label2,group: group3,attrs: {text: {text: 标签2,fill: #333,fontSize: 12,},},},{id: label3,group: group4,attrs: {text: {text: 标签3,fill: #333,fontSize: 12,},},},],}, 代码解释
1、这里写了四个groupgroup1就是之前写的连接桩其他三个就是我们要添加的标签所在的组因为防止三个标签重叠所以我分成了三个组去分别写了position
2、因为使用了端口ports来添加标签。默认情况下端口会显示一个圆形标记因此默认情况下你看到三个白色的圈。这里我给那三个group加了以下代码去隐藏了那三个圈。 attrs: {circle: {r: 0, // 设定半径为0隐藏圆圈},},
