标签：10 LinkView text invalid ele cell stroke nodeIds id

 

 

 报错的原因是：生成线的时候，找不到目标源的id，如下，红色部分，在已生成的nodes中，找不到源所指向的节点id

解决方式就是加判断句

let nodeIds = this.nodeList.map((item) => { 　　　　return item.modelId; });

this.linkList.forEach((ele) => {
    if (nodeIds.includes(ele.fromModelId) && nodeIds.includes(ele.toModelId)) {  //必须添加上这一判断句，保证渲染节点不出现异常
          const linkItem = new joint.shapes.standard.Link({
            id: `关系${ele.relationId}`,
            source: {
              id: ele.fromModelId,
              port: 'out'
            },
            target: {
              id: ele.toModelId,
              port: 'in'
            },
            attrs: {
              line: {
                stroke: '#999',
                targetMarker: {
                  type: 'path',
                  'stroke-width': 1.5,
                  d: 'M 10 -5 0 0 10 5 Z'
                },
                /** 单向 or 双向 */
                sourceMarker:
                  ele.relationType == 1
                    ? {}
                    : {
                        type: 'path',
                        'stroke-width': 1.5,
                        d: 'M 10 -5 0 0 10 5 Z'
                      }
              }
            },
            labels: [
              {
                attrs: {
                  text: {
                    text: ele.relationName,
                    'font-size': 12,
                    fill: '#232323'
                  },
                  rect: {
                    stroke: '#999',
                    refWidth: '150%',
                    refHeight: '120%',
                    refX: '-25%',
                    refY: '-10%'
                  }
                }
              }
            ]
          });
          links.push(linkItem);
        }
  });

 

     

标签：10,LinkView,text,invalid,ele,cell,stroke,nodeIds,id
来源： https://www.cnblogs.com/fyjz/p/15267396.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。