jointjs笔记4- 设置线的label，

 var Link = joint.dia.Link.define('self.Link',
                    {
                        attrs: {
                            line: {
                                connection: true,
                                stroke: 'gray',
                                strokeWidth: 2,

                                pointerEvents: 'none',
                                targetMarker: {
                                    type: 'path',
                                    fill: 'gray',
                                    stroke: 'none',
                                    d: 'M 10 -10 0 0 10 10 z'
                                }
                            }
                        },
                        connector: {
                            name: 'rounded'
                        },
                        z: 1,
                        weight: 1,
                        minLen: 1,
                        labelPosition: 'c',
                        labelOffset: 10,
                        labelSize: {
                            //  50,
                            height: 30
                        },
                        labels: [{
                            markup: [{
                                tagName: 'rect',
                                selector: 'labelBody'
                            }, {
                                tagName: 'text',
                                selector: 'labelText'
                            }],
                            attrs: {
                                labelText: {
                                    text:"包括",
                                    fill: 'black',
                                    textAnchor: 'middle',
                                    refY: '30%',
                                    refY2: '-50%',
                                    fontSize: 20,
                                    cursor: 'pointer'
                                },
                                labelBody: {
                                    fill: 'grey',
                                    stroke: 'grey',
                                    strokeWidth: 2,
                                    refWidth: '100%',
                                    refHeight: '100%',
                                    refX: '-50%',
                                    refY: '-50%',
                                    rx: 5,
                                    ry: 5
                                }
                            },
                            size: {
                                 80, 
                                height: 30
                            }
                        }]

                    }, 
                    {

                        markup: [{
                            tagName: 'path',
                            selector: 'line',
                            attributes: {
                                'fill': 'none'
                            }
                        }],

                        connect: function(sourceId, targetId) {
                            return this.set({
                                source: { id: sourceId },
                                target: { id: targetId }
                            });
                        },

                        setLabelText: function(text) {
                            return this.prop('labels/0/attrs/labelText/text', text || '');
                        }
                    }
                );
                data.forEach((item,index)=>{
                    if(index+1<data.length){
                        new Link().connect(data[index].id,data[index+1].id).setLabelText("测试").addTo(this.graph);
                    };
                    
});

 设置特殊的label - 替换上面的labels中

提示:label上的rect以及text，全是通过位移移到需要的位置，svg中没有父标签和子标签，全是同级，通过位移来调整位置；（refX，refY）,这两个属性

markup: [
     {
        tagName: 'rect',
        selector: 'labelBody'

     }, 
     {
        tagName: 'rect',
        selector: 'labelCenter'
     }, 
     {
        tagName: 'rect',
        selector: 'labelRight'
     }, 
     {
        tagName: 'text',
        selector: 'labelText'
     },
     {
        tagName: 'text',
        selector: 'labelCenterText'
     },
     {
        tagName: 'text',
        selector: 'labelRightText'
     }
 ],
 attrs: {
      labelBody: {
          fill: 'grey',
          stroke: 'grey',
          strokeWidth: 2,
          refWidth: '100%',
          refHeight: '100%',
          refX: '-50%',
          refY: '-50%',
          // rx: 5, //圆角
          // ry: 5
      },
      labelCenter: {
          fill: 'grey',
          stroke: 'grey',
          strokeWidth: 2,
          refWidth:  "50%",
          refHeight: 60,
          refX: '50%',
          refY: '-175%',
          rx: 5,
          ry: 5,
          title:"包含包含包含", //相当于标签上的title属性，相对于text中进行省略之后，看不全的情况，该属性只用于元素上element
       },
       labelRight: {
           fill: 'grey',
           stroke: 'grey',
           strokeWidth: 2,
           refWidth:  '100%',
           refHeight: '100%',
           refX: '100%',
           refY: '-85%',
           // rx: 5,
           // ry: 5,
           text:"目标IP",          
        },
        // 左边label text
        labelText: {
           text:"包括",
           fill: 'black',
           textAnchor: 'top',
           refX: '-40%',
           refY: '30%',
           refY2: '-50%',
           fontSize: 20,
           cursor: 'pointer'
        },
        // 关系label text
        labelCenterText: {
           text:"包含包含包含",
           fill: 'white',
           textAnchor: 'middle',
           refX: '75%',
           refY: '30%',
           refY2: '-50%',
           fontSize: 20,
           cursor: 'pointer',
           textWrap: { //给label设置一个box,设定好box的宽高,就可以实现文本的换行
              height: 40,
               30,
              ellipsis: true,
           },
           "y-alignment":"middle" //设置这个文本的对齐方式
        },
        //右边label text
        labelRightText: {
          text:"目标IP",
          fill: 'black',
          textAnchor: 'middle',
          refX: '150%',
          refY: '30%',
          refY2: '-50%',
          fontSize: 20,
          cursor: 'pointer'
       },
},

---

用到的新属性

textWrap ： dia.attributes.textWrap

textWrap: {
  text: 'lorem ipsum dolor sit amet consectetur adipiscing elit',
   -10, // reference width minus 10
  height: '50%', // half of the reference height
  ellipsis: true // could also be a custom string, e.g. '...!?'
}

仅对<text>有效。

 类似于text属性，只是所提供的字符串会自动包装以适应引用边界框。

 期望一个具有text属性和可选宽度和高度的对象，它可以调整换行后文本的最终大小。负值会减小尺寸(例如，在换行后的文本周围添加padding);正值增加维度。百分比值也可以接受。

 如果文本不能按照指定的边界框放入，则溢出的单词将被切断。如果提供了省略号选项，则在切断之前插入一个省略号字符串。如果边界框中根本没有文字，则不会插入文本。见实效。breakText更多信息。

y-alignment ： dia.attributes.yAlignment

如果设置为“middle”，则子元素将以新的y坐标为中心。

title ：dia.attributes.title

标题不作为图形的一部分呈现，而是作为工具提示显示