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: { // width: 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: { width: 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, width: 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', width: -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
标题不作为图形的一部分呈现，而是作为工具提示显示
