joinjs-intoduction

Introduction：

• hello world
• installation
• Graph&Paper

introduction

1. demos演示 => tutorials教程 => geometry几何学 => vectorizer矢量器

tutorials
英 [tju(ː)ˈtɜːrɪəlz] 美 [tuˈtɔriəlz]
n.(大学导师的)个别辅导时间，辅导课;教程;辅导材料;使用说明书
tutorial的复数 [tjuːˈtɔːriəl]， [tuːˈtɔːriəl]
geometry
英 [dʒiˈɒmətri] 美 [dʒiˈɑːmətri]
n.几何(学);几何形状;几何图形;几何结构
vector
英 [ˈvektə®] 美 [ˈvektər]
n.矢量;向量;(传染疾病的)介体，载体;(航空器的)航线

2. introduction介绍 => intermediate中级的 =>advanced高级的 =>archive档案文件,归档

intermediate:[ˌɪntəˈmiːdiət],中间的，中级的，
archive
英 [ˈɑːkaɪv] 美 [ˈɑːrkaɪv]
n.档案;档案馆;档案室
v.把…存档;把…归档;将(不常用信息)存档
achieve
英 [əˈtʃiːv] 美 [əˈtʃiːv]
v.(凭长期努力)达到(某目标、地位、标准);完成;成功

leave a message留言

The JointJS diagramming library lets you create fully interactive diagramming tools for all modern browsers, relying only on JavaScript and SVG. Its MVC (more MV) architecture separates graph, element and link models from their rendering, which makes it easy to plug JointJS to your backend application. JointJS is not trying to reinvent the wheel for technologies that are commonly used by web developers; things that you learn with JointJS will be useful to you elsewhere. JointJS is built with Backbone MVC library and makes use of jQuery and Lodash.
JointJS图表库允许您为所有现代浏览器创建完全交互式的图表工具，只依赖于JavaScript和SVG。它的MVC（MoreMV）体系结构将图形、元素和链接模型与它们的渲染分离开来，这使得将JointJ插入后端应用程序变得容易。JointJS并没有试图为Web开发人员通常使用的技术重新造轮子；您使用JointJS学习的东西将对您在其他地方有用。JointJS与Backbone MVC库一起构建，并利用jquery和lodash。
architecture
英 [ˈɑːkɪtektʃə®] 美 [ˈɑːrkɪtektʃər]
n.建筑学;建筑设计;建筑风格;体系结构;(总体、层次)结构
plug
英 [plʌɡ] 美 [plʌɡ]
n.插头;(电源)插座;转换插头
v.堵塞;封堵;补足;补充;供给;推广;宣传
plugin：插件

reinvent =>re+invent ：重新发明
英 [ˌriːɪnˈvent] 美 [ˌriːɪnˈvent]
v.以新形象示人;以新形式出现

A diagram in JointJS is represented by a Graph model (joint.dia.Graph) to which you add models of cells - either Elements (subtypes of joint.dia.Element) or Links (subtypes of joint.dia.Link). To present the diagram, attach it to a Paper view (joint.dia.Paper). Starting from version 0.6, you manipulate models, not views; the paper generates ElementViews and LinkViews for you from the data provided by the graph models. The architecture is illustrated in the following diagram (created with JointJS!).
jointjs中的图表由图形模型（joint.dia.graph）表示，您可以在其中添加单元格模型-元素（joint.dia.element的子类型）或链接（joint.dia.link的子类型）。要显示图表，请将其附加到Paper视图（joint.dia.Paper）。从0.6版开始，您可以操作模型，而不是视图；paper根据图形模型提供的数据为您生成ElementViews 和LinkViews 。架构如下图所示（用jointjs创建！）
=>Graph + Element&Link ==》Paper

cell包含：element和link。
present
英 [ˈpreznt , prɪˈzent] 美 [ˈpreznt , prɪˈzent]
adj.现存的;当前的;出现;在场;出席;存在
n.礼物;礼品;目前;现在
v.把…交给;颁发;授予;提出;提交;(以某种方式)展现，显示，表现
represent
英 [ˌreprɪˈzent] 美 [ˌreprɪˈzent]
v.代表;作为…的代言人;维护…的利益;等于;相当于;意味着
illustrate
英 [ˈɪləstreɪt] 美 [ˈɪləstreɪt]
v.加插图于;给(书等)做图表;(用示例、图画等)说明，解释;表明…真实;显示…存在

JointJS provides a visual library of common geometric shapes, as well as an extensive collection of ready-to-use components from several well-known diagramming languages (ERD, OrgChart, FSA, UML, PN, DEVS, …). The JointJS framework has been designed with an eye towards modularity. This makes it easy for advanced users to create their own shapes and to extend built-in functionality with custom plugins. Rappid, a commercial extension to JointJS, provides a number of pre-made plugins that extend its functionality with widgets, interaction components, and additional shapes (BPMN diagrams).
JointJS提供了一个常见几何图形的可视化库，以及来自几种著名图表语言（ERD、ORGChart、FSA、UML、PN、DEV等）的大量现成组件集合。JointJS框架的设计着眼于模块化。这使得高级用户很容易创建自己的形状，并使用自定义插件扩展内置功能。RappID是JointJS的商业扩展，它提供了许多预先制作的插件，通过小部件、交互组件和其他形状（BPMN图）扩展其功能。

extend =>扩展
英 [ɪkˈstend] 美 [ɪkˈstend]
v.使伸长;扩大;扩展;延长;使延期;扩大…的范围(或影响)
extense
adj.扩展的；伸展的
extensive
英 [ɪkˈstensɪv] 美 [ɪkˈstensɪv]
adj.广阔的;广大的;大量的;广泛的;广博的
extension
英 [ɪkˈstenʃn] 美 [ɪkˈstenʃn]
n.扩大;延伸;增加的房间;扩建部分;增建部分
ready-to-use =>现成的
英 [ˈredi tu juːz] 美 [ˈredi tu juːz]
随时可用的;即用型;使用的;立即可用;使用
pre-made 预制的
built-in内置的
modularity =>模块化
n.积木性；模件性；;调制性；调制率
additional
英 [əˈdɪʃənl] 美 [əˈdɪʃənl]
adj.附加的;额外的;外加的

hello world

Feel free to copy-paste the program code into a new file and see it in action for yourself: 请随意复制粘贴程序代码到新文件中，并亲自查看：

<!-- content -->
    <div id="myholder"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
<!-- code -->
    <script type="text/javascript">

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);

    </script>

=>
依赖： jquery，lodash，backbone，jointjs
内容：Graph，Paper，Element，Link，

var graph= new joint.dia.Graph;  // graph
var paper= new joint.dia.Paper({ }) // paper
var rect=new joint.shapes.standard.Rectangle(); // rectangle
var link = new joint.shapes.standard.Link(); // link

rect：矩形(Rectangular);矩形结构;矩形区域
rectangle：矩形[ˈrektæŋɡl]

Even though the code is quite short, it creates a fully interactive JointJS diagram. The program does everything a JointJS application needs to do in order to produce a visual output:

• Include JointJS and its dependencies
• Define a graph and a paper
• Create two rectangular elements
• Create one link to connect the elements

We will look at each of these steps in turn. Use this list as an index of the basic tutorial topics.

尽管代码很短，但它创建了一个完全交互式的JointJS图。该程序执行JointJS应用程序所需的所有操作，以生成可视化输出：
1.包括JointJS及其依赖项
2.定义图形和纸张
3.创建两个矩形元素
4.创建一个链接以连接元素
我们将依次查看这些步骤。使用此列表作为基本教程主题的索引。

diagram：图表
program：程序

installation

For your JointJS application to run, the JointJS library and its dependencies have to be included in the source HTML of your page. Our initial example used a CDN to link to the required source files for JointJS, jQuery, Lodash and Backbone:
要运行JointJS应用程序，JointJS库及其依赖项必须包含在页面的源HTML中。我们的初始示例使用cdn链接到jointjs、jquery、lodash和主干网所需的源文件：

If you do not wish to use a CDN, you can install JointJS locally instead. Assuming that you have NPM installed on your system, run the following command in the command line (Terminal/Command Prompt):
如果不想使用cdn，可以在本地安装jointjs。假设您的系统上安装了NPM，请在命令行（终端/命令提示符）中运行以下命令：
command prompt：命令提示
prompt
英 [prɒmpt] 美 [prɑːmpt]
adj.立即;迅速的;及时的;敏捷的;准时的
v.促使;导致;激起;鼓励，提示，提醒(某人说话);给(演员)提词
n.(给演员的)提词，提示;提示符
adv.准时地

npm install --save jointjs

==》所需要的jq，lodash，backbone，jointjs都会生成。以及package-lock.json。

You can then find all the required source files in their respective folders inside the generated node_modules folder. The code segment would then look like the following (this is the form used in JointJS demos):
然后，您可以在生成的node_modules 文件夹中的各自文件夹中找到所有所需的源文件。代码段如下（这是JointJS演示中使用的形式）：

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/lodash/lodash.js"></script>
    <script src="node_modules/backbone/backbone.js"></script>
    <script src="node_modules/jointjs/dist/joint.js"></script>

respect
英 [rɪˈspekt] 美 [rɪˈspekt]
n.尊敬;敬意;尊重;重视;维护;(事物的)方面，细节
v.尊敬;尊重;仰慕;慎重对待;谨慎从事;遵守;不损害;不违背
respective
英 [rɪˈspektɪv] 美 [rɪˈspektɪv]
adj.分别的;各自的
segment
英 [ˈseɡmənt , seɡˈment] 美 [ˈseɡmənt , seɡˈment]
n.部分;份;片;段;(柑橘、柠檬等的)瓣;弓形;圆缺
v.分割;划分

graph & paper

In this section, we will learn how to finish setting up by creating a graph and a paper in our JointJS code and linking them to our HTML. We will be looking at these portions of the original Hello, World! application:
在本节中，我们将学习如何通过在JointJS代码中创建一个图表和一张纸，并将它们链接到HTML来完成设置。我们将看到最初的这些部分你好，世界！应用：
portion
英 [ˈpɔːʃn] 美 [ˈpɔːrʃn]
n.部分;(食物的)一份，一客;分享的部分;分担的责任
v.把…分成若干份(或部分)

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 100,
    gridSize: 1
});

All useful JointJS applications need to have a graph and a paper. The graph contains a reference to all components of your diagram, and the paper is responsible for rendering the graph.
所有有用的JointJS应用程序都需要有一个图表和一张纸。该图包含对图中所有组件的引用，而纸张负责呈现该图。
response：响应，反应，回答，答复
responsible：有责任，有义务
be responsible for
英 [rɪˈspɒnsəbl fɔː®] 美 [rɪˈspɑːnsəbl fɔːr]
为…负责;是造成…的原因

The Graph model is usually defined on the first line of the JointJS JavaScript code. In our code, we saved a reference to it as var graph. In order to have our cells (elements and links) rendered, we need to add them to the graph; unless we add our cells, the diagram does not know they exist. In our example, we do that with the addTo() functions, but we could also do it with the graph.addCells() function.
图形模型通常在jointjs javascript代码的第一行定义。在我们的代码中，我们将对它的引用保存为var graph。为了让我们的单元格（元素和链接）呈现出来，我们需要将它们添加到graph中；除非我们添加单元格，否则图表不知道它们存在。在我们的示例中，我们使用addto()函数来实现这一点，但是我们也可以使用graph.addcells()函数来实现这一点。

graph.addCells(rect);
graph.addCells(link);

Normally, the Paper view is specified directly after the graph definition. We create it with an options object and save it as var paper. Of the five options, two define crucial paper attributes:

• el - an HTML element into which the paper will be rendered.
• graph - a Graph model we want to render into the paper.我们要在纸上呈现的图形模型。
  These attributes relate the rendered paper to our HTML on one side, and to our JointJS data (element and link models) on the other. This makes paper the most important building block of any diagram.

通常，Paper 直接在图形定义之后指定。我们用选项对象创建它，并将其保存为var paper。在这五个选项中，有两个定义了关键的纸张属性：
这些属性将呈现的纸张一端与HTML相关，另一端与JointJS数据（元素和链接模型）相关。这使得纸成为任何图表中最重要的构建块。
==>el与html关联，model与data关联；

crucial
英 [ˈkruːʃl] 美 [ˈkruːʃl]
adj.至关重要的;关键性的

The three other options specify the paper’s presentation attributes. In our example, these are:
其他三个选项指定纸张的表示属性。在我们的示例中，这些是：

• width and height - the dimensions of the rendered paper (in pixels).渲染纸的尺寸（像素）。
• gridSize - the size of the grid to which elements are aligned. Affects the granularity of element movement.元素对齐到的网格的大小。影响元素移动的粒度。==》移动element的时候，有一个吸附效果，移动的粒度大小 。

granular
英 [ˈɡrænjələ®] 美 [ˈɡrænjələr]
adj.由颗粒构成的;含颗粒的;似颗粒状的
granularity
n.粒度；（颗，成）粒性
dimension
英 [daɪˈmenʃn] 美 [daɪˈmenʃn]
n.维(构成空间的因素);尺寸;规模;程度;范围;方面;侧面

The full list of available Paper attributes is long and allows customizing almost everything about the paper rendering. You will encounter these in the advanced portions of the tutorial series. The most used paper attributes are presented in visual form in the Paper Attributes demo.

可用纸张属性的完整列表很长，可以自定义几乎与纸张渲染有关的所有内容。您将在教程系列的高级部分中遇到这些问题。最常用的纸张属性在 Paper Attributes demo中以可视形式显示。==>demos=>JointJS Demos => Paper Attributes(http://resources.jointjs.com/demos/paper)
所有属性地址：
http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.options
eg：background，drawGrid，gridSize，origin，

// 背景颜色
background:{
    color: '#6764A7',
    image:"../image/1.jpg",
    size:'auto auto', // {width:Number,height:Number},'auto auto',
    repeat:'flip-y', // flip-x,flip-y,flip-xy,watermark,no-repeat
    position:'center',
    quality:0.1,
    opacity:0.1,
}

drawGrid:true, // 显示grid
gridSize:10,

 interactive: false  // 没有交互了

encounter
英 [ɪnˈkaʊntə®] 美 [ɪnˈkaʊntər]
v.遭遇，遇到(尤指令人不快或困难的事);偶然碰到;意外地遇见;与…邂逅
n.(意外、突然或暴力的)相遇，邂逅，遭遇，冲突;(体育)比赛，交锋

Paper styling

Now, let’s make some changes to the appearance of the original Hello, World! application. We can specify a background color with the background attribute, and show the grid with drawGrid. For the grid to be visible, we also need to increase gridSize:
现在，让我们对原来的“你好，世界”应用的外观做一些更改！。我们可以使用background属性指定背景颜色，并使用drawgrid显示网格。为了使网格可见，我们还需要增加网格大小：
specify
英 [ˈspesɪfaɪ] 美 [ˈspesɪfaɪ]
v.具体说明;明确规定;详述;详列

gridSize: 10,
drawGrid: true,
background: {
    color: 'rgba(0, 255, 0, 0.3)'
}

Appendix: Paper Scaling

At any point after defining the paper, we can use the paper.scale() function to transform the paper and all of its contents. Have a look at the advanced Multiple Papers tutorial to learn how to use this functionality to create diagram minimaps and previews. The example presents the diagram scaled at a factor of one half; note that scaling does not affect paper dimensions:
在定义纸张之后的任何时候，我们都可以使用paper.scale()函数来转换纸张及其所有内容。查看“高级多篇论文”教程，了解如何使用此功能创建图表小地图和预览。示例显示了比例为一半的图表；请注意，比例不会影响纸张尺寸： ==>advanced=>multiple papers（http://resources.jointjs.com/tutorial/multiple-papers）
==>缩略图就是用scale方法实现功能的。

paper.scale(0.5, 0.5);

paperSmall.scale(0.25);

appendix
英 [əˈpendɪks] 美 [əˈpendɪks]
n.阑尾;(书、文件的)附录

Appendix: Paper Translation

We can also use the paper.translate() function to move the origin of the paper coordinates and all of its contents; when used in a custom interaction, this may support paper panning functionality. The example presents the scaled diagram from above translated by 300 and 50 units:
我们还可以使用paper.translate()函数移动纸张坐标的原点及其所有内容；在自定义交互中使用时，这可能支持纸张平移功能。示例显示了上面的比例图，转换为300和50个单位：

paper.translate(300, 50);

coordinate
英 [kəʊˈɔːdɪneɪt , kəʊˈɔːdɪnət] 美 [koʊˈɔːrdɪneɪt , koʊˈɔːrdɪnət]
v.使协调;使相配合;使(身体各部分)动作协调;协同动作;(衣服、家具等)搭配，协调
n.坐标;(颜色协调的)配套服装，套装
ordinate
英 [ˈɔːdɪnət] 美 [ˈɔːrdɪnət]
n.纵坐标
interact
英 [ˌɪntərˈækt] 美 [ˌɪntərˈækt]
v.交流;沟通;合作;相互影响;相互作用
interaction
英 [ˌɪntərˈækʃən] 美 [ˌɪntəˈrækʃən]
n.相互影响（作用，制约，配合）；交互作用（影响）；交相感应；干扰（涉）
interactive
英 [ˌɪntərˈæktɪv] 美 [ˌɪntərˈæktɪv]
adj.合作的;相互影响的;互相配合的;交互式的;人机对话的; 互动的

总结：
paper：
options有一些参数，scale，translate，