The basic tutorial series offered an introduction into link labels. This section explains everything you need to know to make full use of the powerful label system. 基本教程系列介绍了链接标签。本节将解释充分利用强大的标签系统所需的所有信息。 http://resources.jointjs.com/tutorial/links.html#link-labels ==> link labels
JointJS offers a full suite of methods for working with link labels: JointJS提供了一整套使用链接标签的方法：
link.labels(labels) - sets the labels array of the link. If called without arguments, returns the labels array.link.label(index, label) - sets the provided label at the given index. If called with index only, returns that label.link.insertLabel(index, label) - inserts the provided label at the given index.link.appendLabel(label) - shortcut function. Inserts the label at the end of the labels array.link.removeLabel(index) - removes the label at index. 设置链接的标签数组。如果不带参数调用，则返回Labels数组。在给定索引处设置提供的标签。如果只使用索引调用，则返回该标签。在给定索引处插入提供的标签。快捷功能。在标签数组的末尾插入标签。删除索引处的标签。 link3.insertLabel(0,{ attrs:{ body:{ }, label:{ text:'你是第sige个lable了222' } }, position:{ distance:-0.2 } }) console.log(link3.label(0)); // 此时刚加入的这个label就是第一个了。因为insert进来的。 link3.addTo(graph);A simple label definition (including markup and attrs) is built into the joint.dia.Link class, from which all subtypes, including joint.shapes.standard.Link, inherit it. The builtin default label has two tags: text (the SVGElement of the label), and rect (the SVGElement for label background). The builtin default attributes specify a simple vertical-centered text on a white rounded rectangle. Thus, adding a label can be as simple as passing a value for the text/text attribute: 在joint.dia.link类中构建了一个简单的标签定义（包括标记和属性），所有子类型（包括joint.shapes.standard.link）都从该类继承它。内置默认标签有两个标签：text （标签的 SVGElement ）和rect （标签背景的 SVGElement ）。内置默认属性在白色圆角矩形上指定简单的垂直居中文本。因此，添加标签可以像传递文本/文本属性的值一样简单：
link.appendLabel({ attrs: { text: { text: 'Hello, World!' } } });等同于：
link.labels([{ attrs: { text: { text: 'Hello, World!' } } }]);添加两个label：
link.labels([ { attrs: { text: { text: 'Hello, World!' } } }, { attrs: { text: { text: 'Hello, World2!' } }, position:{ distance:0.2 } } ]);label的默认属性：http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Link.intro.builtinDefaultAttributes
Labels are positioned at the center point of the link (distance of 0.5) by default. Three kinds of label.position.distance values are recognized for setting custom position. A value between 0 and 1 causes the label to be positioned relatively to link length. Positive values signify absolute position in local SVG units away from start point. Finally, negative values mean absolute position away from end point. An animated example is presented below. (Link labels can also be emulated with link subelements and special attributes; this technique is explained elsewhere in the tutorial.)
标签是放置在link的中心点（distance of 0.5）为默认值。三种label.position.distance值是公认的设置自定义位置。值0和1之间的位置和相对位置导致标签到链接的长度。在本地积极的绝对位置值signify SVG单元远离发射点。最后，均值的绝对位置值从负端点。在下面的例子是一个额外的动画。（链接标签链接的子元素，可以仿真技术和特殊属性；这可能是选择的教程）。
==>
0-1，这种百分比的值正值，从start开始负值，从end开始 link.appendLabel({ attrs: { text: { text: '0.25' } }, position: { distance: 0.25, } }) link.appendLabel({ attrs: { text: { text: '150' } }, position: { distance: 150, } }) link.appendLabel({ attrs: { text: { text: "-100" } }, position: { distance: -100, } })It is also possible to set label offsets. This is done with the label.position.offset property. With a positive number, the label is offset relatively and to the right of the link; a negative number causes the label to be offset to the left. An object with x and y coordinates offsets the label absolutely by that amount in the two dimensions. The following example illustrates these three options. The red asterisk marks the reference point of all labels on the link. (Link labels can also be emulated with link subelements and special attributes; this technique is explained elsewhere in the tutorial.)
也可以设置标签偏移。这是通过label.position.offset属性完成的。如果是正数，则标签相对偏移到链接的右侧；如果是负数，则标签向左偏移。具有x和y坐标的对象在二维中绝对偏移标签的量。下面的示例说明了这三个选项。红色星号标记链接上所有标签的参考点。（链接标签也可以用链接子元素和特殊属性来模拟；本教程的其他地方将介绍这种技术。）
==>整数：在 箭头方向的右侧；负数在 箭头方向的左侧！
asterisk 英 [ˈæstərɪsk] 美 [ˈæstərɪsk] n.星号(置于词语旁以引起注意或另有注释) v.加星号于
link.appendLabel({ attrs:{ text:{ text:'40' } }, position:{ distance:0.66, offset:40, } }) link.appendLabel({ attrs:{ text:{ text:'-40', } }, position:{ distance:0.66, offset:-40, } }) link.appendLabel({ attrs:{ text:{ text:'-40,80', } }, position:{ distance:0.66, offset:{x:-40,y:80}, } }) link.addTo(graph);Of course, it is also possible to change the appearance of your labels. Simply specify custom markup in JSON format and pass some attrs. As a bonus, you can define custom selectors to identify individual components of your label. Let’s define a complex circular label that shows what JointJS can do:
当然，也可以更改标签的外观。只需以JSON格式指定自定义markup 并传递一些属性。另外，还可以定义自定义选择器来标识标签的各个组件。让我们定义一个复杂的圆形标签，它显示JointJS可以做什么：
bonus 英 [ˈbəʊnəs] 美 [ˈboʊnəs] n.奖金;红利;意外收获
var link = new joint.shapes.standard.Link(); link.source(new g.Point(100, 50)); link.target(new g.Point(500, 50)); link.appendLabel({ markup: [ { tagName: 'circle', selector: 'body' }, { tagName: 'text', selector: 'label' }, { tagName: 'circle', selector: 'asteriskBody' }, { tagName: 'text', selector: 'asterisk' } ], attrs: { label: { text: '陆', fill: '#000000', fontSize: 14, textAnchor: 'middle', yAlignment: 'middle', pointerEvents: 'none' }, body: { ref: 'label', fill: '#ffffff', stroke: '#000000', strokeWidth: 1, refR: 1, refCx: 0, refCy: 0 }, asterisk: { ref: 'label', text: '锛�', fill: '#ff0000', fontSize: 8, textAnchor: 'middle', yAlignment: 'middle', pointerEvents: 'none', refX: 16.5, refY: -2 }, asteriskBody: { ref: 'asterisk', fill: '#ffffff', stroke: '#000000', strokeWidth: 1, refR: 1, refCx: '50%', refCy: '50%', refX: 0, refY: 0 } } }); link.addTo(graph);