4.intermediate-specialAttr

introduction
special attributes
Relative Dimensions
relative dimensions based on text
Link Arrowheads
Relative Position on Links
总结

introduction

In the basic section of the tutorial, we learned how to create a simple JointJS application. By now, you should be able to:

Install JointJS and include it in your pages
Create a graph and a paper
Add simple elements to the diagram
Connect elements with simple links

在本教程的基本部分中，我们学习了如何创建简单的JointJS应用程序。到目前为止，您应该能够：

安装JointJS并将其包含在页面中
创建图表和纸张
向图表中添加简单元素
用简单link连接元素

In this section of the tutorial, we will go one step further, to understand more involved topics that allow us to customize our diagrams more fully:

JointJS special attributes
Events (interaction)
Data serialization (persistence)
Defining custom elements
Defining custom links
Link labels
Link tools

在本教程的这一节中，我们将进一步深入了解更多涉及的主题，使我们能够更全面地自定义图表：

JointJS特殊属性
事件（交互）
数据序列化（持久性）
定义自定义元素
定义自定义link
link标签
link工具

persistence
英 [pəˈsɪstəns] 美 [pərˈsɪstəns]
n.坚持;锲而不舍;持续存在;维持

We will look at each of these steps in turn. Use this list as an index of the intermediate tutorial topics.
我们将依次查看这些步骤。使用此列表作为中间教程主题的索引。

special attributes

Special attributes are JointJS-specific attributes that offer functionality beyond that of native SVG attributes. We have already mentioned them when talking about element styling, and seen them in action when adding link arrowheads. They become much more important when we talk about creating custom elements, links and link labels.
Special attributes 是jointjs特定的属性，它提供的功能超出了SVG本身属性的范围。在谈到element styling时，我们已经提到了它们，并在添加链接箭头时看到了它们的作用。当我们讨论创建自定义元素、链接和链接标签（link labels）时，它们变得更加重要。
==>

链接箭头有两个特殊属性：sourcemaker和targetmarker。

The main way to define the styling of diagram elements, links, and labels in JointJS is through attrs objects. If the attributes passed are standard SVG attributes, they are merely passed down to the individual SVGElements of the shape; then it is the job of the browser to apply them to the elements and render the shapes in the requested manner when asked to do so by JointJS View classes. However, if JointJS encounters one of its special attributes, it takes over with custom logic in order to offer advanced functionality; the results are then encoded back as standard SVG attributes.
定义jointjs中图表元素、链接和标签样式的主要方法是通过attrs对象。如果传递的属性是标准SVG属性，那么它们只会传递给形状的各个SVgelements；那么，当jointjs视图类要求这样做时，浏览器的工作就是将它们应用到元素并以请求的方式呈现形状。但是，如果jointjs遇到了它的一个特殊属性，它将使用自定义逻辑来提供高级功能；然后将结果编码为标准SVG属性。

rect.attr({body: {  },label: { }});

link.attr({line: {stroke: 'blue',strokeWidth: 1,}});

 link.labels([{attrs: {text: {text: 'Hello, World!'}}}]);

individual
英 [ˌɪndɪˈvɪdʒuəl] 美 [ˌɪndɪˈvɪdʒuəl]
adj.单独的;个别的;一个人的;供一人用的;独特的;与众不同的
n.个人;与众不同的人;有个性的人;某种类型的人;(尤指)古怪的人
manner
英 [ˈmænə®] 美 [ˈmænər]
n.方式;方法;举止;态度;礼貌;礼仪

All JointJS special attributes use camelCase naming. For consistency, it is thus very strongly recommended that you make use JointJS’s ability to translate camelCase into native SVG’s kebab-case, and use camelCase when setting native SVG attributes as well (i.e. strokeWidth instead of native 'stroke-width').
所有jointjs特殊属性都使用camelcase命名。因此，为了保持一致性，强烈建议您使用JointJS能将camelcase转换为SVG本身的kebab-case的能力，并在设置SVG本身属性时使用camelcase（即strokeWidth而不是本机“stroke-width”）。
==> 使用svg原有属性的时候，使用camelCase写法；使用特殊属性的时候，也是用camelCase写法！！！！
camelCased (驼峰式)
kebab-case（短横线命名）

consist
英 [kənˈsɪst] 美 [kənˈsɪst]
v.由…组成;由…构成;在于;存在于
consistency
英 [kənˈsɪstənsi] 美 [kənˈsɪstənsi]
n.一致性;连贯性;黏稠度;密实度;平滑度;坚实度

A list of native SVG attributes can be found elsewhere on the Internet; have a look, for example, at MDN’s SVG Attribute reference. In this section of the tutorial, we want to show you what additional things JointJS allows you to do.
可以在Internet的其他地方找到本机SVG属性列表；例如，查看MDN的SVG属性引用。在本教程的这一节中，我们将向您展示JointJS允许您做的其他事情。

Relative Dimensions

One of the most common requests when working with SVG is to set the dimensions of SVGElements relatively. JointJS allows you to do that with a suite of ref attributes. These attributes allow you to size shape subelements as a percentage of the dimensions of the shape’s model. Moreover, since all calculations are programmatic and do not rely on browser’s bbox measurements, using these attributes does not impact performance of your app. (There is also a view-based method if you need to work with text; it is explained in the following section.)
使用SVG时最常见的请求之一是相对地设置SVGElements 的尺寸。JointJS允许您使用一组ref属性来实现这一点。这些属性允许您将形状子元素的大小调整为形状模型尺寸的百分比。此外，由于所有计算都是程序化的，并且不依赖于浏览器的bbox度量，因此使用这些属性不会影响应用程序的性能。（如果需要处理文本，还可以使用基于视图的方法；下面一节将对此进行解释。）
calculate
英 [ˈkælkjuleɪt] 美 [ˈkælkjuleɪt]
v.计算;核算;预测;推测
calculation
英 [ˌkælkjuˈleɪʃn] 美 [ˌkælkjuˈleɪʃn]
n.计算;估计;预测;推测;算计;自私的打算
impact
英 [ˈɪmpækt , ɪmˈpækt] 美 [ˈɪmpækt , ɪmˈpækt]
n.巨大影响;强大作用;撞击;冲撞;冲击力
v.(对某事物)有影响，有作用;冲击;撞击
performance
英 [pəˈfɔːməns] 美 [pərˈfɔːrməns]
n.表演;演出;艺术上的表现;演技;表现;性能;业绩;工作情况
impact performance冲击性能

refWidth and refHeight - sets the width of the subelement relative to model bbox.
refX and refY - sets the coordinates of the top-left corner of the subelement
relative to the top-left corner of model bbox. Percentages are interpreted relative to model bbox.

Stacks with the native x/y attribute.

refCx and refCy - sets the coordinates of the circle/ellipse center. Percentages are interpreted relative to model bbox.

Can be used alongside refX/refY.

refRx and refRy - sets the radius of the ellipse relative to model bbox dimensions. Percentages are interpreted relative to model bbox. Note that for backwards compatibility, setting ‘100%’ here means that the radius will be 100% of model size while the diameter of the ellipse in that direction will be 200% of model size. Thus, if you want the ellipse to fit into the model, use ‘50%’.
refR - sets the radius of the circle relative to the length of the shorter side of model bbox. Percentages are interpreted relative to model bbox. Note that for backwards compatibility, setting ‘100%’ here means that the radius will be 100% of the length of model side. If you want the circle to fit inside the model, use ‘50%’. There is also refRCircumscribed, which sets the radius of the circle relative to the longest diagonal of model bbox.

refWidth and refHeight - 设置子元素相对于模型bbox的宽度。
refX and refY - 设置子元素左上角相对于模型bbox左上角的坐标。百分比是相对于模型bbox来解释的。
与原生的x/y属性叠加。（x&y是数值单位的，没有百分比）
refCx and refCy - 设置圆/椭圆中心的坐标。百分比是相对于模型bbox来解释的。
可与refx/refy一起使用。（refX&refY是百分比的设值）
refRx and refRy - 设置椭圆相对于模型bbox尺寸的半径。百分比是相对于模型bbox来解释的。注意，为了向后兼容，在这里设置“100%”意味着半径将为模型大小的100%，而该方向的椭圆直径将为模型大小的200%。因此，如果希望椭圆适合模型，请使用“50%”。
refR - 设置圆相对于模型bbox较短边长度的半径。百分比是相对于模型bbox来解释的。注意，为了向后兼容，在这里设置“100%”意味着半径将是模型侧长度的100%。如果要使圆适合模型，请使用“50%”。还有refRCircumscribed，它设置圆相对于模型bbox最长对角线的半径。

radius
英 [ˈreɪdiəs] 美 [ˈreɪdiəs]
n.半径(长度);半径范围;周围;桡骨
diameter
英 [daɪˈæmɪtə®] 美 [daɪˈæmɪtər]
n.直径;对径;放大率;放大倍数
diagonal
英 [daɪˈæɡənl] 美 [daɪˈæɡənl]
adj.斜线的;对角线的
n.对角线;斜线
circumscribed：外接圆
circumference
英 [səˈkʌmfərəns] 美 [sərˈkʌmfərəns]
n.圆周;圆周长
center：中心；圆点
interpret
英 [ɪnˈtɜːprət] 美 [ɪnˈtɜːrprət]
v.诠释;说明;把…理解为;领会;口译

假如模型w和h都为40！
refWidth&refHeight：设置w和h；=> 0.5或者 ‘50%’
refX&refY：设置距离左上角的位置；=>40或者’100%’
refCx&refCy：设置圆点位置；=>圆点默认在原点！ ‘50%’
refRx&refRy：设置椭圆的x和y轴半径
refR：设置圆的半径
refRCircumscribed：圆的半径为模型的对角线
x&y：根据原点偏移量；-20

注：圆和椭圆默认圆心在模型的origin上；rect的左上角默认在model的左上角；

Let us see the relative attributes in action. We define a custom element type named CustomElement as a subtype of joint.dia.Element. We want it to have three SVGElements - a red-tinted ellipse named e, a green-tinted rect named r, and a blue-tinted circle named c, respectively. The outline SVGRectElement shows us the reference bbox of the element model. In the example, we use JointJS transitions to vary the dimensions of element from (40,40) to (270,100). (We also adjust position to make sure the element stays in the visible area of our paper.) Notice that the subelements of the shape adjust automatically as the size of the reference model changes:

让我们看看相关属性的作用。我们将名为customElement的自定义元素类型定义为joint.dia.element的子类型。我们希望它有三个svgelements——一个红色的椭圆名为e，一个绿色的rect名为r，一个蓝色的圆名为c。轮廓线svgrectelement向我们展示了元素模型的参考bbox。在这个例子中，我们使用JointJS转换将元素的尺寸从（40,40）更改为（270,100）。（我们还调整位置以确保元素保持在纸张的可见区域。）请注意，形状的子元素会随着参考模型的大小而自动调整：
vary
英 [ˈveəri] 美 [ˈveri]
v.(大小、形状等)相异，不同，有别;(根据情况)变化，改变;变更;(略做)改变

stretch =>撑大
英 [stretʃ] 美 [stretʃ]
v.拉长;拽宽;撑大;抻松;有弹性(或弹力);拉紧;拉直;绷紧
n.一片;一泓;一段;(连续的)一段时间;服刑期
contract
英 [ˈkɒntrækt , kənˈtrækt] 美 [ˈkɑːntrækt , kənˈtrækt]
n.合同;合约;契约;(雇用杀人的)协议
v.(使)收缩，缩小;感染(疾病);得(病);与…订立合同(或契约)

paper中的属性：

 interactive: false, // 元素就不可以拖拽了！！！

    var customElement = joint.dia.Element.define('examples.CustomElement',{attrs: {e: {strokeWidth: 1,stroke: '#000',fill: 'rgba(255,0,0,0.3)',refRx: '50%',refRy: '25%',refCx: '50%',refCy: '0%',refX: '-50%',refY: '25%',},r: {strokeWidth: 1,stroke: '#000',fill: 'rgba(0,255,0,0.3)'},c: {strokeWidth: 1,stroke: "#000",fill: 'rgba(0,0,255,0.3)'},outline: {refX: 0,refY: 0,refWidth: '100%',refHeight: '100%',strokeWidth: 2,stroke: '#000',strokeDasharray: '5 5',strokeDashoffset: 5,fill: 'none'}},},{markup: [{tagName: 'ellipse',selector: 'e'},{tagName: 'rect',selector: 'r'},{tagName: 'circle',selector: 'c'},{tagName: 'rect',selector: 'outline'}]})var element = new customElement();element.attr({e: {},r: {// width:40,// height:40,refWidth: '50%',refHeight: '50%',refX: '100%',refY: '100%',x: -10,y: -10,},c: {refRCircumscribed: '50%',refX: '50%',refY: '50%',}})

注：attrs中，定义默认的属性；markup中，定义形状；
设置属性时，attr：选择各个svg，eg：Rectangle中的body，label

element.on('transition:start', function (element) {console.log("start......."); // start和end都会执行两次！！！！！element.currentTransitions += 1;console.log("当前数：",element.currentTransitions);
});

relative dimensions based on text

An advanced application of relative attributes is using them to set the dimensions of shape subelements based on the dimensions of bboxes of rendered JointJS views. This is especially valuable when you need to base the position and size of shape components on subelements since JointJS is not able to work with them programmatically. Note that because this method relies on browser measurements, it is noticeably slower and less precise than the model-based method mentioned above; you should use that method for subelements that can be modeled by JointJS.
相对属性的一个高级应用程序正在使用它们根据渲染的jointjs视图的bbox的尺寸来设置形状子元素的尺寸。当需要将形状组件的位置和大小建立在子元素上时，这一点尤其重要，因为jointjs无法以编程方式使用它们。请注意，由于此方法依赖于浏览器测量，因此它明显比上面提到的基于模型的方法慢且精度低；对于可以由jointjs建模的子元素，应该使用该方法。
precise
英 [prɪˈsaɪs] 美 [prɪˈsaɪs]
adj.准确的;确切的;精确的;明确的;(强调时间或方式等)就，恰好;细致的;精细的;认真的;一丝不苟的

ref - a selector reference to the subelement whose measured bbox should be used as the base of relative attributes.
子元素的选择器引用，其测量的bbox应用作相对属性的基。

We define a custom element type named CustomTextElement as a subtype of joint.dia.Element. It is very similar to CustomElement defined above, except this time, all subelements refer to a new text component named label. In the example, we use JointJS transitions to vary the text content of label. Notice that the subelements of the shape adjust automatically as the size of label changes due to the added characters:
我们将一个名为customtextfelement的自定义元素类型定义为joint.dia.element的子类型。它与上面定义的customElement非常相似，除了这次，所有子元素都引用一个名为label的新文本组件。在这个例子中，我们使用JointJS转换来改变标签的文本内容。请注意，由于添加了字符，形状的子元素会随着标签大小的变化而自动调整：

注：time是0-1之间的小数，eg：0.7791227499999986，每0.00416一个点！（240个左右）

textAnchor: 'middle',  // tex水平居中，且圆会圆点居中
textVerticalAnchor: 'middle', // 垂直居中

Link Arrowheads

sourceMarker and targetMarker - sets an arrowhead of requested SVGElement ‘type’ to the start/end of the link. The other properties passed in the object are expected to be SVG attributes for that SVGElement.

sourceMarker and targetMarker - 将请求的svgelement“type”的箭头设置为链接的开始/结束。对象中传递的其他属性应为该svgelement的svg属性。==>将不同的箭头类型设置为link的头和尾。

Link arrowhead special attributes expect an object with native SVG attributes. This means that they are not able to understand JointJS special attributes, and they cannot make use of JointJS’s camelCase translation. In order to better communicate these restrictions to programmers, we strongly encourage the use of quotation marks around all arrowhead marker properties (i.e. ‘type’ and not type; ‘stroke-width’ and not strokeWidth).

链接箭头特殊属性需要具有原生SVG属性的对象。这意味着他们（链接箭头特殊属性）不能理解JointJS 的特殊属性，他们不能利用JointJS的camelCase 翻译。为了更好地向程序员传达这些限制，我们强烈建议在所有箭头标记属性（即"type"而不是 type、"stroke width"和strokeWidth）周围使用引号。
==>也就是说：特殊属性里面的key，不能用camelCase ，用引号的方式写！！！

The ‘type’ of the arrowhead can be any valid SVGElement type. The following example shows how to create a link with two simple arrowheads.
箭头的“type”可以是任何有效的svgelement类型。下面的示例演示如何使用两个简单的箭头创建链接。

The two arrowheads have the same path data commands, despite pointing in opposite directions; this is because all targetMarker values are automatically rotated by 180 degrees. The path commands’ coordinate system has origin at the tip of the link and is rotated according to the slope of the link at that point. This means that you can design all your arrowheads as if they were pointing left and towards the point 0,0 in local coordinates, and then rely on JointJS’s automatic arrowhead rotation.
两个箭头具有相同的路径数据命令，尽管指向相反的方向；这是因为所有Targetmarker值都自动旋转180度。路径命令的坐标系的原点位于链接的尖端，并根据链接在该点的坡度进行旋转。这意味着你可以设计所有的箭头，就像它们指向左边和指向当地坐标的0，0，然后依靠JointJS的自动箭头旋转。
==>所有的都按在左侧的情况，移动位置！！！eg：下面lock-circle的情况，右侧的circle按砸左侧的情况下位移，然后jointJS会自动旋转的！！！

Note that, in general, if the ‘fill’ and ‘stroke’ colors are not specified, they are adopted from the line.stroke attribute.
注意，一般来说，如果fill和stroke没有定义，它们是从line.stroke属性中采用的。

To create an arrowhead, you need to provide an URL with the path to your image to the ‘xlink:href’ property, and then specify the desired ‘width’ and ‘height’. Keep in mind that both of your markers should reference images pointing “left”; the image for targetMarker will be automatically rotated by 180 degrees by JointJS, and then both markers will match the gradient of the link path. Remember to reposition the image in the ‘y’ axis (by -1/2 the value of ‘height’) if you need the arrowhead to be centered.
要创建一个箭头，你需要提供一个URL，将你的图像的路径提供给'xlink:href' 属性，然后指定所需的“宽度”和“高度”。请记住，两个标记都应该引用指向“左”的图像；目标标记的图像将由jointjs自动旋转180度，然后两个标记将匹配链接路径的渐变。如果需要将箭头居中，请记住在“Y”轴上重新定位图像（按“高度”值的-1/2）。

link.attr({line: {sourceMarker: {'type': 'image','xlink:href': 'http://xxxxx.png''width': 24,'height': 24,'y': -12},targetMarker: {'type': 'image','xlink:href': 'http://xxxxx.png''width': 24,'height': 24,'y': -12}}
});
link.addTo(graph);

To create an arrowhead of arbitrary SVGElement type, simply specify the ‘type’ appropriately, and then provide native SVG attributes to style it. Keep in mind that ‘circle’ and ‘ellipse’ SVG elements have origin in their center; they need to be repositioned with the ‘cx’ attribute (by the value of ‘r’) if you do not want them to overflow the end of the link.

要创建任意SVGElement 类型的箭头，只需适当地指定“类型”，然后提供本机svg属性来设置其样式。请记住，“circle”和“elliple”svg元素的原点在其中心；如果不希望它们溢出链接的末尾，则需要使用“cx”属性（通过值“r”）重新定位它们。
arbitrary
英 [ˈɑːbɪtrəri] 美 [ˈɑːrbɪtreri]
adj.任意的;武断的;随心所欲的;专横的;专制的
appropriate
英 [əˈprəʊpriət , əˈprəʊprieɪt] 美 [əˈproʊpriət , əˈproʊprieɪt]
adj.合适的;恰当的
v.盗用;挪用;占用;侵吞;拨(专款等)

注：圆心在link的末端（溢出一个r）！r是半径；按在起始点的情况下设置位移，jointJS会自动旋转的！

link.attr({line: {sourceMarker: {'type': 'rect', // 任意的类型'width': 50,'height': 10,'y': -5, // 上移5px'fill': 'rgba(255,0,0,0.3)','stroke': 'black'},targetMarker: {'type': 'circle','r': 10,'cx': 10, // 圆心右移10px（在左边是右移，在右边，是相反方向）==>native attr？？？'fill': 'rgba(0,255,0,0.3)','stroke': 'black'}}
});

Relative Position on Links

Several special attributes on links allow you to position subelements relatively to the link’s connection path:
链接的几个特殊属性允许您相对链接的连接路径定位子元素：

connection - if set to true, the subelement will follow the link connection path. Applicable only to subelements.
atConnectionLength - sets the absolute distance from the beginning of the path at which the anchor of the subelement should be placed. Negative distances are counted from the end of the connection path. Rotates subelement according to link gradient at requested length.
atConnectionRatio - sets the relative distance from the beginning of the path at which the anchor of the subelement should be placed. Accepts numbers between 0 and 1. Rotates subelement according to link gradient at requested ratio.

connection - 如果设置为true，子元素将遵循链接连接路径。仅适用于子元素。
atConnectionLength - 设置从应放置子元素锚定点的路径开始处开始的绝对距离。从连接路径的末端开始计算负距离。根据请求长度的链接渐变旋转子元素。
atConnectionRatio - 设置从应放置子元素锚定点的路径开始处开始的相对距离。接受介于0和1之间的数字。按照请求的比率根据链接渐变旋转子元素。

negative
英 [ˈneɡətɪv] 美 [ˈneɡətɪv]
adj.坏的;有害的;消极的;负面的;缺乏热情的;否定的
n.否定词;否定;拒绝;底片;负片;属阴性(或否定)的结果
v.拒绝;否定;否定…的真实性;证伪
negative distance :负距离
ratio
英 [ˈreɪʃiəʊ] 美 [ˈreɪʃioʊ]
n.比率;比例

These attributes are ideal for adding symbols and arrowheads on the connection path and have them rotate according to path slope. Let us illustrate with a custom link type:
这些属性非常适合在连接路径上添加符号和箭头，并使它们根据路径坡度旋转。让我们用一个自定义链接类型来说明：

ideal
英 [aɪˈdiːəl] 美 [aɪˈdiːəl]
adj.完美的;理想的;最合适的;想象的;不切实际的
n.理想;看似完美的思想(或标准);完美的人(或事物)
slope
英 [sləʊp] 美 [sloʊp]
n.斜坡;坡地;山坡;斜度;坡度
v.倾斜;有坡度;悄悄地走;潜行;溜
oscillate
英 [ˈɒsɪleɪt] 美 [ˈɑːsɪleɪt]
v.(情感或行为)摇摆，变化;摆动;振动;波动;振荡

Link Subelement Labels

An even more advanced application of special attributes uses them at link subelements to construct fake link labels that rotate according to the slope of the link. However, keep in mind that link subelements are more difficult to set up and use dynamically than link labels (JointJS does not come with a built-in API to do this), and that they have a very important limitation when used this way:
一个更高级的特殊属性应用程序在链接子元素上使用它们来构造假链接标签，这些标签根据链接的坡度旋转。但是，请记住，与链接标签相比，动态设置和使用链接子元素更困难（JointJS不附带内置API来实现这一点），并且当以这种方式使用时，它们有一个非常重要的限制：

They cannot use the ref attribute. This means that they are unable to automatically set their width and height values based on the browser-calculated dimensions of the text bbox. It is up to the programmer to provide approximate width and height values to accommodate the label text.
它们不能使用ref属性。这意味着他们无法根据浏览器计算的文本框尺寸自动设置宽度和高度值。由程序员提供近似的宽度和高度值，以适应标签文本。

approximate
英 [əˈprɒksɪmət , əˈprɒksɪmeɪt] 美 [əˈprɑːksɪmət , əˈprɑːksɪmeɪt]
adj.大约的;近似的;接近的
v.近似;接近;近似计算;概略估算
approximately
英 [əˈprɒksɪmətli] 美 [əˈprɑːksɪmətli]
adv.大概;大约;约莫
accommodate
英 [əˈkɒmədeɪt] 美 [əˈkɑːmədeɪt]
v.为(某人)提供住宿(或膳宿、座位等);容纳;为…提供空间;考虑到;顾及

We encourage you to take advantage of our easy-to-use link label API unless you need label rotation.
我们鼓励您利用我们易于使用的链接标签API，除非您需要标签轮换。

==>linkLabel在link上，但是不会随着link倾斜而倾斜；

take advantage of利用; 占…的便宜; 欺骗; 捉弄
rotation
英 [rəʊˈteɪʃn] 美 [roʊˈteɪʃn]
n.旋转;转动;(旋转的)一周，一圈;轮换;交替;换班

It is also possible to create link subelement labels that do not rotate according to the slope of the link; this is useful for absolutely-offset link labels. (Note that this functionality is very similar to the functionality of link labels.) There are two special attributes that do this:
也可以创建不根据链接坡度旋转的链接子元素标签；这对于绝对偏移的链接标签很有用。（注意这个功能与链接标签的功能非常相似。）有两个特殊属性：

atConnectionLengthIgnoreGradient - sets the absolute distance from the beginning of the path at which the anchor of the subelement should be placed. Negative distances are counted from the end of the connection path. Does not rotate subelement according to path gradient.
atConnectionRatioIgnoreGradient - sets the relative distance from the beginning of the path at which the anchor of the subelement should be placed. Accepts numbers between 0 and 1. Does not rotate subelement according to path gradient.

atConnectionLengthIgnoreGradient - 设置从应放置子元素锚定点的路径开始处开始的绝对距离。从连接路径的末端开始计算负距离。不根据路径渐变旋转子元素。
atConnectionRatioIgnoreGradient - 设置从子元素锚定的路径开始的相对距离。接受介于0和1之间的数字。不根据路径渐变旋转子元素。

(The previously mentioned atConnectionLength/atConnectionRattio attributes are actually aliases for more verbose names atConnectionLengthKeepGradient/atConnectionRatioKeepGradient. You should see that these names were designed to complement the names of the two attributes newly introduced above.) In both cases (that is, whether we keep link gradient or not), offsetting of link subelement labels is achieved by clever use of the native x and y SVG attributes.
（前面提到的atconnectionlength/atconnectionrattio属性实际上是更详细名称atconnectionlengthkeepgradient/atconnectionratiokeepgradient的别名。您应该看到，这些名称是为补充上面新引入的两个属性的名称而设计的。）在这两种情况下（即，无论我们是否保持链接渐变），通过巧妙地使用本地X和Y SVG属性来实现链接子元素标签的偏移。

Let us illustrate with the following demo. A custom link type is defined with link label subelements positioned in such a way as to emulate the functionality shown in the link label position and offset examples. The red asterisk marks the reference point of the offset subelements on the link connection path.
让我们用下面的演示来说明。自定义链接类型定义为链接标签子元素，该链接子元素以这样的方式定位，以模拟链接标签位置和偏移示例中所示的功能。红色星号标记链接连接路径上偏移子元素的参考点。

Notice that we had to write much more complex code than in the link labels demo, and that if we wanted to add more “labels”, we would have to manipulate link.markup and link.attrs directly. We do not recommend this approach to beginner users of JointJS.
请注意，我们必须编写比链接标签演示更复杂的代码，如果要添加更多的“标签”，我们就必须直接操纵Link。我们不向JointJS的初学者推荐这种方法。

总结

relative dememsions =>子元素
refWidth，refHeight，refX,refY，refCx，refCy，refRx，refRy，refR，
relative demensions based on text
link arrowhead
sourceMarker，targetMarker，
relative position on links =>link上的元素
connection，atConnectionLength，atConnectionRatio，
link subment labels
最好直接使用link label。