3.jointjs-links

link geometry
link style
link arrowhead
Link Labels
总结

In this section, we are going to understand the other crucial building block of JointJS diagrams - links. This is an introduction to links as they appear in the Hello, World! application; more advanced topics are covered later in the tutorial series. We will continue with the code we modified in the previous section:
在本节中，我们将了解JointJS图的另一个关键构建块 - link。这是对链接的介绍，因为它们出现在“你好，世界！”的应用程序中；更高级的主题将在教程系列的后面介绍。我们将继续上一节中修改的代码：

var link3 = new joint.shapes.standard.Link();
link3.source(rect5);
link3.target(rect6);
link3.addTo(graph);

Working with links is similar to working with elements:

• First, a link is created by calling its constructor.
• Then, different methods are called on the link to set its properties (source & target, vertices, router & connector, attributes, labels…).
• Finally, the link is added to the graph.

使用链接与使用元素类似：
1.首先，通过调用其构造函数创建链接。
2.然后，在链接上调用不同的方法来设置其属性（源和目标、顶点、路由器和连接器、属性、标签…）。
3.最后，将链接添加到图表中。

In our case, the three links are instances of joint.shapes.standard.Link. The standard shape library contains several other ready-made link definitions (e.g. DoubleLink and ShadowLink) that can be used in your document. Moreover, advanced users may create their own link definitions instead, by extending the basic joint.dia.Link class.
在我们的例子中，这三个链接是joint.shapes.standard.link的实例。标准形状库包含其他几个可在文档中使用的现成链接定义（例如DoubleLink和ShadowLink）。此外，高级用户可以通过扩展基本joint.dia.link类来创建自己的链接定义。

var link= new joint.shapes.standard.Link();
var link= new joint.shapes.standard.DoubleLink(); // 双线
var link= new joint.shapes.standard.ShadowLink(); // 带阴影的线

Our demo showcases the two required Link methods:

• link.source() and link.target() - sets the source/target of the link. To connect the link to an element, pass the element to the function (as we do in our example). To “pin” the link to a fixed point on the paper, pass a g.Point (or an object with x and y properties).

Other important methods include:

• link.clone() - clones an existing link, including its source, target, vertices, router, connector, attributes, and labels (attributes and labels are explained in more detail below).
• link.addTo() - adds the link to a graph so it can be rendered.

1. link.source() and link.target() -设置链接的源/目标。要将链接连接到元素，请将元素传递给函数（正如我们在示例中所做的那样）。要将链接“固定”到纸张上的固定点，请传递一个g.Point（或具有X和Y属性的对象）。

var link2= new joint.shapes.standard.Link();

link2.source({x:100,y:100}) // 等价于：link.source(new g.Point(100, 50));
link2.target({x:200,y:200})

link2.addTo(graph);

2. link.clone() - 克隆现有链接，包括其源、目标、顶点、路由器、连接器、属性和标签（属性和标签将在下面详细介绍）。
3. link.addTo() - 将链接添加到图形中，以便可以呈现它。

Link的所有方法：http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Link.prototype

Link Geometry 链接几何

The shape of the link can be set with three optional methods:
可以使用三种可选方法设置链接的形状：

• link.vertices() - sets the vertices array of the link. 设置链接的顶点数组。

Vertices are user-defined points on the paper that the link should pass trough on its way from source to target. The default is an empty array (meaning that the link navigates from source to target with no detour).
顶点是用户在纸上定义的点，链接在从源到目标的过程中应该通过槽。默认值是一个空数组（意味着链接从源导航到目标，没有迂回）。
vertex
英 [ˈvɜːteks] 美 [ˈvɜːrteks]
n.(三角形或锥形的)角顶;顶点;至高点
vertices
英 [ˈvɜːtɪsiːz]
n.(三角形或锥形的)角顶;顶点;至高点
vertex的复数

• link.router() - sets the router of the link. 设置链接的路由器。

The router is a function that takes the array of link vertices and adds additional points to it as necessary to create a route with desired characteristics; for example, the orthogonal router creates a route consisting of vertical and horizontal lines attached at right angles. JointJS comes with a collection of pre-defined routers in the joint.routers namespace. Two of the provided routers are “smart routers” that are able to navigate around obstacles in their path. The default is the normal router, which returns the array of vertices as route points. Advanced users may provide their own routers to support custom routing strategies.
路由器是一个函数，它获取链接顶点数组并根据需要向其添加其他点，以创建具有所需特征的路由；例如，正交路由器(orthogonal router)创建由垂直和水平线组成的路由，这些线以直角连接。jointjs在joint.routers命名空间中附带了一组预定义的路由器。提供的路由器中有两个是“智能路由器”，它们能够绕过路径中的障碍物。默认为普通路由器，它将顶点数组作为路由点返回。高级用户可以提供自己的路由器来支持自定义路由策略。
desire
英 [dɪˈzaɪə®] 美 [dɪˈzaɪər]
n.愿望;欲望;渴望;情欲;肉欲;性欲;想望的人;渴望的事物
v.渴望;期望;想望;被(某人)吸引;对(某人)产生性欲
characteristic
英 [ˌkærəktəˈrɪstɪk] 美 [ˌkærəktəˈrɪstɪk]
adj.典型的;独特的;特有的
n.特征;特点;品质

orthogonal
美 [ɔːˈθɒgənəl]
adj.正交的；直角（交）的；（相互）垂直的；矩形的
consist
英 [kənˈsɪst] 美 [kənˈsɪst]
v.由…组成;由…构成;在于;存在于
vertical
英 [ˈvɜːtɪkl] 美 [ˈvɜːrtɪkl]
adj.竖的;垂直的;直立的;纵向的
n.垂直线;垂直位置
horizontal
英 [ˌhɒrɪˈzɒntl] 美 [ˌhɔːrɪˈzɑːntl]
adj.水平的;与地面平行的;横的
n.水平位置;水平线;水平面;横线;横切面
right angle
英 [ˈraɪt æŋɡl] 美 [ˈraɪt æŋɡl]
n.直角
obstacle
英 [ˈɒbstəkl] 美 [ˈɑːbstəkl]
n.障碍;阻碍;绊脚石;障碍物;障碍栅栏
router:http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#routers
参数：

link.router('manhattan');
link.router('metro');
link.router('normal');
link.router('orthogonal'); // 正交线
link.router('orthogonal',{padding:10});
link.router('oneSide');

manhattan
英 [ˌmænˈhætn] 美 [ˌmænˈhætn]
n.曼哈顿鸡尾酒(用威士忌或其他烈酒与苦艾酒调制而成)
metro
英 [ˈmetrəʊ] 美 [ˈmetroʊ]
n.地下铁路;地铁;(尤指)巴黎地铁;大城市，大都市(尤指德里、加尔各答、孟买或钦奈)
adj.大都市的
oneSide:单方面的

• link.connector() - sets the connector of the link. 设置链接的连接器。

The connector is a function in charge of rendering the link’s path on the paper. It takes the array of route points provided by a router and constructs a series of SVGPathElement path data commands to create a path with desired characteristics; for example, the rounded connector creates straight line segments with rounded corners around route points. JointJS comes with a collection of pre-defined connectors in the joint.connectors namespace. The default is the normal connector, which connects route points with simple straight lines. Advanced users may provide their own connectors to support custom connecting strategies.
连接器是一个在纸上绘制链接路径的函数。它采用路由器提供的路由点数组，构造一系列svgpathelement路径数据命令，以创建具有所需特征的路径；例如，圆形连接器(rounded connector)创建围绕路由点的圆角直线段。jointjs在joint.connectors名称空间中附带了一组预定义的连接器。默认为普通连接线，它用简单的直线连接布线点。高级用户可以提供自己的连接器来支持自定义连接策略。
connectors:http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#connectors
参数：eg：

link.connector('jumpover');
link.connector('normal');
link.connector('rounded'); // 圆角
link.connector('rounded',{radius:20});
link.connector('smooth');

Link geometry is also affected by the anchor and connectionPoint methods applied to link source and target, as well as the connectionStrategy set on the paper.
链接几何结构还受应用于链接源和目标的锚定和连接点(connectionPoint )方法，以及本文设置的连接策略的影响。
anchor
英 [ˈæŋkə®] 美 [ˈæŋkər]
n.锚;给以安全感的人(或物);精神支柱;顶梁柱
v.抛锚;下锚;使固定;扣牢;系牢;使扎根;使基于

Link Styling 连接样式

Link styling works analogously to element styling:链接样式与元素样式类似：
analogous
英 [əˈnæləɡəs] 美 [əˈnæləɡəs]
adj.相似的;类似的

• link.attr() - programmatically assigns SVG attributes directly to the SVGElements of the link’s markup. (CSS styles may still be used on top of the styling defined here, and they will have precedence over these attributes.)
• 以编程方式将svg属性直接分配给链接标记的svgelements。（CSS样式可能仍在此处定义的样式之上使用，它们将优先于这些属性。）

When link.attr() is called with one object as argument, the keys of the object are selectors that correspond to SVGElements of the link’s markup; each of those can have one or more attributes defined alongside the value to be set. If you only need to change one value, you can also call link.attr() with two arguments; the first is the path of the attribute in the form 'selector/attribute' and the second is the value to be assigned.
当用一个对象作为参数调用link.attr()时，对象的键是与链接标记的svgelements相对应的选择器；每个选择器都可以在要设置的值旁边定义一个或多个属性。如果只需要更改一个值，也可以使用两个参数调用link.attr()；第一个参数是'selector/attribute'形式的属性路径，第二个参数是要分配的值。

If you are completely new to SVG, you may want to have a look at, for example, the Fills and Strokes tutorial on MDN. JointJS is able to handle all standard SVG attributes, however, please note that we strongly encourage everyone to use camelCase versions of attribute names for consistency and in order to avoid the need for quotation marks in attribute name keys. In addition, JointJS provides an extensive set of non-standard special JointJS attributes; these allow you to specify attributes relatively to other shape selectors, among other things. Special attributes are discussed in detail later in the tutorial.

如果您对SVG完全陌生，您可能需要了解一下，例如，MDN上的填充和笔画教程。JointJS能够处理所有标准SVG属性，但是，请注意，我们强烈建议每个人使用属性名称的camelcase版本以保持一致性，并避免在属性名称键中使用引号。此外，jointjs提供了一组广泛的非标准特殊jointjs属性；这些属性允许您相对于其他形状选择器指定属性。本教程稍后将详细讨论特殊属性。

The joint.shapes.standard.Link shape used in our example has two selectors defined: line (the visible SVGElement of the link), and wrapper (a wider, transparent SVGElement under the line that makes it easier to interact with the link). Other link shapes have their own selector names (although consistency was preserved where applicable, e.g. with line); please refer to the joint.shapes.standard documentation for detailed information.

示例中使用的joint.shapes.standard.Link形状定义了两个选择器：line（链接的可见 svgelement）和wrapper（行下的更宽、透明 svgelement，使其更容易与链接交互）。其他链接形状有自己的选择器名称（尽管在适用的情况下保持一致性，例如line）；有关详细信息，请参阅 joint.shapes.standard文档。
参见： http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#shapes.standard.Link

var link = new joint.shapes.standard.Link();
link.prop('source', { x: 5, y: 150 }); // 等同于： link.source({ x: 5, y: 150 })
link.prop('target', { x: 70, y: 300 }); 
link.prop('vertices', [{ x: 80, y: 180 }]); // 等同于：link.vertices([{ x: 80, y: 180 }]);
link.attr('root/title', 'joint.shapes.standard.Link'); // hover时候的提示语
link.attr('line/stroke', '#fe854f'); // 画线用stroke
link.addTo(graph);

For example, we can change the color of a link by changing the stroke color attribute on the line selector:
例如，我们可以通过更改线条选择器上的“笔划颜色”属性来更改链接的颜色：

var link = new joint.shapes.standard.Link();
link.source(new g.Point(100, 50));
link.target(new g.Point(500, 50));
link.attr({
    line: {
        stroke: 'orange'
    }
});
link.addTo(graph);

var link2 = new joint.shapes.standard.Link();
link2.source({x: 100, y: 100}); // 两种写法
link2.target({x: 500, y: 100});
link2.attr("line/stroke", 'red'); // 两种写法
link2.addTo(graph);

Link Arrowheads

arrowhead 英 [ˈærəʊhed] 美 [ˈæroʊhed] n.箭头;箭镞 Two `special attributes` are in charge of link arrowheads; `sourceMarker` and `targetMarker`. (In the case of `joint.shapes.standard.Link`, they are defined on the `line` selector.) The `'type'` of the arrowhead can be any valid SVGElement type; we will look at `path` and `image` arrowheads specifically, but we will mention the others in more advanced sections of the tutorial. 链接箭头有两个特殊属性：sourcemaker和targetmarker。（在joint.shapes.standard.link的情况下，它们是在line 选择器上定义的。）箭头的“类型”可以是任何有效的svgelement类型；我们将具体查看路径(path )和图像(image )箭头，但我们将在本教程的更高级部分中提到其他箭头。

The following example shows how to create a link with two simple path arrowheads. Notice that if the 'fill' and 'stroke' colors are not specified, they are adopted from the line.stroke attribute. 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. Together, these characteristics mean that you can design all your arrowheads as if they were pointing left and towards the point 0,0 in local coordinates; JointJS will take care of the rest. Let’s illustrate with a simple clock:
下面的示例演示如何使用两个简单的路径(path)箭头创建链接。请注意，如果未指定“fill”和“stroke”颜色，则从line.stroke属性中继承它们。两个箭头具有相同的路径数据命令，尽管指向相反的方向；这是因为所有Targetmarker值都自动旋转180度。路径命令的坐标系的原点位于链接的尖端，并根据链接在该点的坡度进行旋转。总之，这些特征意味着您可以将所有箭头设计为在局部坐标中向左指向0,0点；jointjs将处理其余箭头。让我们用一个简单的时钟来说明：

link.attr({
    line: {
        sourceMarker: {
            'type': 'path',
            'd': 'M 20 -10 0 0 20 10 Z'
        },
        targetMarker: {
            'type': 'path',
            'stroke': 'green',
            'stroke-width': 2,
            'fill': 'yellow',
            'd': 'M 20 -10 0 0 20 10 Z'
        }
    }
});
link.addTo(graph);

==>sourceMarker&targetMarker里面的属性，使用的是引号+中划线写法。

Creating image arrowheads is similarly straightforward. You just need to provide an url with the path to your image to the ‘xlink:href’ property, and then specify the desired ‘width’ and ‘height’. The image for targetMarker will be automatically rotated by 180 degrees, as expected. Remember to reposition the image in the ‘y’ axis if you need the arrowhead to be centered. Let’s return to our clock example:
创建图像箭头也很简单。您只需要提供一个URL，其中包含指向’xlink:href’属性的图像路径，然后指定所需的’width’和’height’。如预期，Targetmarker的图像将自动旋转180度。如果需要箭头居中，请记住在“Y”轴上重新定位图像。让我们回到时钟示例：
straightforward
英 [ˌstreɪtˈfɔːwəd] 美 [ˌstreɪtˈfɔːrwərd]
adj.简单的;易懂的;不复杂的;坦诚的;坦率的;率直的
straight
英 [streɪt] 美 [streɪt]
adv.笔直地;平正地;成直线;直接;径直;立即;正;直
adj.直的;直筒型(非紧身)的;准的;正中目标的
straight lines：直线

link.attr({
    line: {
        sourceMarker: {
            'type': 'image',
            'xlink:href':"img-href", // 图片的路径
            "width":24, // w和h，它的origin在线的顶部，需要y上移动负一般距离。eg： y:-12,
            "height":24,
            y:-12,
        },
        targetMarker: {
            'type': 'image',
            "xlink:href":"img-href"
            "width":24,
            "height":24,
            x:-12,
        }
    }
});
link.addTo(graph);

Link Labels

• link.labels() - sets the labels array of the link. Labels have markup, attrs, and position properties. 设置链接的标签数组。标签具有标记、属性和位置属性。
  =》有三个属性：attrs，markup，position

Link labels are explained in more detail in a separate section of this tutorial. A simple label definition (including markup and attrs) is built into the joint.dia.Link class, from which the joint.shapes.standard.Link type inherits 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）。内置默认属性在白色圆角矩形上指定简单的 垂直居中文本。因此，添加标签可以像传递 text/text属性的值一样简单：
inherit
英 [ɪnˈherɪt] 美 [ɪnˈherɪt]
v.继承(金钱、财产等);经遗传获得(品质、身体特征等);接替(责任等);继任

var link = new joint.shapes.standard.Link();

link.source(new g.Point(100, 50));
link.target(new g.Point(500, 50));

// label:数组，可以有多个；attrs属性内部写；
link.labels([{
    attrs: {
        text: {
            text: 'Hello, World!'
        }
    }
}]);

link.addTo(graph);

note that since we were only adding one label, we could have also used the link.appendLabel() convenience function:
请注意，由于我们只添加了一个标签，因此还可以使用link.appendLabel()便利函数：

link.appendLabel({
    attrs: {
        text: {
            text: 'Hello, World'
        }
    }
});
link.addTo(graph);

link-label:http://resources.jointjs.com/tutorial/links

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: document.getElementById('myholder'), // id选择器
        model: graph, // model => graph和paper连接起来
        width: 600, // paper的w
        height: 300, // paper的w
        gridSize: 10, // gridSize
        drawGrid: true, // 是否显示gridSize
        background: { // 背景颜色
            color: 'rgba(0, 255, 0, 0.3)'
        }
    });

    var rect = new joint.shapes.standard.Rectangle();
    rect.position(100, 30); // 位置
    rect.resize(100, 40); // 大小
    rect.attr({
        body: {
            fill: 'blue', // rect的背景颜色
            // 默认有stroke，w=2;
            strokeDasharray: '10,5', // 边框虚线：
        },
        label: {
            text: 'Hello', // rect里面的字
            fill: 'white', // rect里面字体的颜色
        }
    });
    rect.addTo(graph);

    var rect2 = new joint.shapes.standard.Rectangle();
    rect2.position(400, 30);
    rect2.resize(100, 40);
    rect2.attr({ // body和label
        body: {
            fill: '#2C3E50',
            rx: 5, // 圆角
            ry: 5,
            strokeWidth: 2, // 边框
            stroke:"red", // 边框颜色
        },
        label: {
            text: 'World!',
            fill: '#3498DB',
            fontSize: 18, // 字体大小
            fontWeight: 'bold', // 字体weight
            fontVariant: 'small-caps',
        }
    });
    rect2.addTo(graph);

    var link = new joint.shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.attr({ // link的属性：line
        line: {
            stroke: 'red', // Link的颜色
            strokeWidth: 2, // link的粗细
            sourceMarker: { // 开始箭头
                'type': 'path', // 类型：path/image
                'stroke': 'black', // 箭头边框的颜色，默认会继承line的颜色
                'fill': 'red', // 箭头的填充色（背景色）
                'd': 'M 10 -5 0 0 10 5 Z', // 箭头形状
            },
            targetMarker: { // 结束箭头
                'type': 'path',
                'stroke': 'black',
                'fill': 'yellow',
                'd': 'M 10 -5 0 0 10 5 Z'
            }
        }
    });
    link.labels([{ // link的label：attrs
        attrs: {
            text: {
                text: 'Hello, World!'
            }
        }
    }]);
    link.addTo(graph);

    var rect3 = new joint.shapes.standard.Rectangle();
    rect3.position(100, 130);
    rect3.resize(100, 40);
    rect3.attr({
        body: {
            fill: '#E74C3C',
            rx: 20,
            ry: 20,
            strokeWidth: 0
        },
        label: {
            text: 'Hello',
            fill: '#ECF0F1',
            fontSize: 11,
            fontVariant: 'small-caps'
        }
    });
    rect3.addTo(graph);

    var rect4 = new joint.shapes.standard.Rectangle();
    rect4.position(400, 130);
    rect4.resize(100, 40);
    rect4.attr({
        body: {
            fill: '#8E44AD',
            strokeWidth: 0
        },
        label: {
            text: 'World!',
            fill: 'white',
            fontSize: 13
        }
    });
    rect4.addTo(graph);

    var link2 = new joint.shapes.standard.Link();
    link2.source(rect3);
    link2.target(rect4);
    link2.vertices([ // 必须要通过的点
        new g.Point(250, 100),
        new g.Point(300, 150),
        new g.Point(350, 200)
    ]);
    link2.router('orthogonal');  // 平行于直角坐标系
    link2.connector('rounded');  // 折线带有圆角
    link2.attr({
        line: {
            stroke: 'gray',
            strokeWidth: 4,
            strokeDasharray: '4 2',
            sourceMarker: {
                'type': 'image',
                'xlink:href': 'http://basefmtest-1252579942.cos.ap-beijing.myqcloud.com/SUserAppResource/headImage/2019-05-17/Wl2Zzlg4/X0pBzFCk.png',
                'width': 24,
                'height': 24,
                'y': -12
            },
            targetMarker: {
                'type': 'image',
                'xlink:href': 'http://basefmtest-1252579942.cos.ap-beijing.myqcloud.com/SUserAppResource/headImage/2019-05-17/Wl2Zzlg4/X0pBzFCk.png',
                'width': 24,
                'height': 24,
                'y': -12
            }
        }
    });
    link2.addTo(graph);

    var link3 = new joint.shapes.standard.Link();
    link3.source(rect3);
    link3.target(rect4);
    link3.connector('jumpover', { size: 10 });
    link3.addTo(graph);

This concludes the introductory section of the JointJS tutorial!
这就结束了JointJS教程的介绍部分！
conclude
英 [kənˈkluːd] 美 [kənˈkluːd]
v.断定;推断出;得出结论;(使)结束，终止;达成，订立，缔结(协定)
handy
英 [ˈhændi] 美 [ˈhændi]
adj.易使用的;容易做的;便利的;近便;便利;手巧;有手艺
involved ==>复杂的
英 [ɪnˈvɒlvd] 美 [ɪnˈvɑːlvd]
adj.参与;作为一部分;有关联;耗费很多时间;关注;关系密切
v.包含;需要;使成为必然部分(或结果);牵涉;牵连;影响;(使)参加，加入
involve的过去分词和过去式
concept
英 [ˈkɒnsept] 美 [ˈkɑːnsept]
n.概念;观念

总结

1. 必须方法：
   source，target，

2. 常用：
   clone，addTo，

3. 几何：
   vertices，router，connector，

4. 样式：
   attr，
   =>root，line，wrapper，

5. label：
   labels，appendLabel，

6. arrowhead
   line（type：path，image，）：sourceMarker，targetMarker，