关于jointjs的介绍，有一篇比较好 jointjs介绍
第一个类paper joint.dia.paper
属性
el css选择器，paper将在该css选择的container下画svg图.例如:el=’#paper’,则在
下面添加svg dom节点 width paper的宽度
height paper的高度
origin paper原点的坐标，默认{x:0,y:0}
gridszie 默认为1
model joint.dia.graph object，根据mvc，该属性对应model,paper对应view
perpendicularlinks 连接线是否正交，默认为false
elementview 负责渲染graph ,默认 joint.dia.elementview
linkview 负责渲染links,默认 joint.dia.linkview
defaultlink 用户动态创建的link（比如：从一个port drag 一条线）,默认为 joint.dia.link，也可以是一个返回值类型为 joint.dia.link函数 function(cellview, magnet) {}
interactive 如果设置为false,则graph中的element和link将禁止操作
validatemagnet(cellview, magnet) magnet翻译成中文就是磁石，在jointjs中它代表的是一个dom元素，当用户点击magnet时，这个函数判断是否创建link
validateconnection(cellviews, magnets, cellviewt, magnett, end, linkview)在source view/magnet (cellviews/magnets) and target view/magnet (cellviewt/magnett)之间是否允许链接。
linkconnectionpoint(linkview, view, magnet, reference)
这个函数允许用户指定link在渲染时stick到元素的某个坐标。这个函数返回一个点{x,y}。当然jointjs也给我们提供了一个强大的函数shapeperimeterconnectionpoint
shapeperimeterconnectionpoint joint.util.shapeperimeterconnectionpoint(linkview, view, magnet, ref) 使用方式如下：
var paper = new joint.dia.paper({ ... linkconnectionpoint: joint.util.shapeperimeterconnectionpoint ...})
效果如下：
snaplinks 当为true时，link会寻找离它最近的元素进行闭合
linkpinning 当为true时，link可以终止于paper，也就是说link可以连接于一个点，而不是element
markavailable 当用户点击magnet时，界面上显示可以连接的magnet。为了突出可以连接的magnet，添加必要的css
/* port styling */.available-magnet { fill: yellow;}/* element styling */.available-cell rect { stroke-dasharray: 5, 2;}
async
embeddingmode 当为true时，paper改变为embed模式，具体说：用户可以将一个元素拖拽到另一个元素里面。在该模式下，所有的link和element会多一个z属性，就行css中的阴影有一个z属性表示层级。为了控制哪些元素可以embed，需要配置 validateembedding()。总之这个属性对于层级图是必须的。
validateembedding(childview, parentview) 如果childview允许被潜入到parentview，返回true.默认所有元素都可以embed到其他元素中
restricttranslate/function(elementview) 当设置为true的时候，用户将不能将elemnt移动到paper边界之外。默认为false。当然它最大的好处不是这个，当给该属性配置一个函数时，你可以限制子元素不可以拖拽出父元素，比如：
restricttranslate: function(elementview) { var parentid = elementview.model.get('parent'); return parentid && this.model.getcell(parentid).getbbox();}