【Jsplumb】Jsplumb基础教程(vue+jsplumb+d3)

目前github社区存在几款可用于设计流程图的绘图框架:

go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ，支持各种交互式图表的创建；目前go.js 是闭源收费的
jsPlumb（https://jsplumbtoolkit.com/): jsPlumb是一套开源的流程图创建工具 ，小巧精悍，使用简单；jsPlumb 有社区版跟收费版，我们可使用的是社区版
JointJS(https://www.jointjs.com/):JointJS是一个开源的、基于JavaScript的图表库，可以用来创建静态图表、完全可交互的图表、 WEB在线流程图、应用程序
mxGraph(http://jgraph.github.io/mxgraph/)：mxGraph是一个js绘图组件，适用在网页设计/编辑流程图、图表、网络图和普通图形的web应用程序，draw.io工具就是基于mxGraph开发的。缺点就是介绍框架简介以及API文档不全，社区问题也较少更新；
GG-Editor（https://g6.antv.vision/） ：GG-Editor是基于 G6 和 React 的可视化图编辑器，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
最终，我选择了jsPlumb，因为它完全开源，文档也较齐全，社区也比较活跃在开发过程中有问题也可以和其他开发者交流；mxGraph和JointJS也不错。大家可以根据自己的需要选择。后期也会着手调研mxGraph，因为基于它实现了功能非常全的draw.io,相信里面也会有非常多好的思路可以参考；

下面将对jsplumb进行介绍并结合案例进行使用

1.什么是jsplumb？

jsplumb是可以让你在网站上展示图表或者甚至在浏览器应用程序中使用图表的开发框架,该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此你可以绘制你可以想到的任何类型的图表

2.jsplumb基础知识

​ 官方文档地址:https://docs.jsplumbtoolkit.com/community/current/index.html

2.1 基本元素组成

Source: 源对象。jsPlumb 通过元素的 id 属性获取对象。

Target: 目标对象。jsPlumb 通过元素的 id 属性获取对象。Source 和 Target 都可以是任何元素，区别是，Source 是起点，Target 是终点。 例如，connector 中的箭头总是从 Source 指向 Target。

Anchor：锚点。是 Source 和 Target 对象上可以连接 Connector 的点。Anchor 并不是一个视觉概念，它是不可见的。

Connector: 连接线。

Endpoint: 端点。需要注意的是，箭头并不是一种端点样式，它是通过 overlay 添加的。

Overlay: 添加到连接线上的附件。例如箭头和标签。

3.开始使用:

3.1 安装

npm install jsplumb --save 

3.2 准备节点元素

假设我们现在这里是一个 .vue 组件。首先我们创建一系列的元素作为 Source 和 Target。

<template>
  <div id="wrapper">
    <div class="line-wrap" style="margin-left: 70px;">
      <div id="item-1" class="state-item">State 1</div>
      <div id="item-2" class="state-item">State 2</div>
      <div id="item-3" class="state-item">State 3</div>
    </div>
    <div class="line-wrap">
      <div id="item-4" class="state-item">State 4</div>
      <div id="item-5" class="state-item">State 5</div>
      <div id="item-6" class="state-item">State 6</div>
      <div id="item-7" class="state-item">State 7</div>
    </div>
    <div class="line-wrap" style="margin-left: 215px;">
      <div id="item-8" class="state-item">State 8</div>
      <div id="item-9" class="state-item">State 9</div>
    </div>
  </div>
</template>

然后我们为它写点 css:

<style >
  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 60px 80px;
    width: 100vw;
  }
  .state-item {
    width: 80px;
    height: 40px;
    color: #606266;
    background: #f6f6f6;
    border: 2px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    line-height: 40px;
    font-family: sans-serif;
    border-radius: 4px;
    margin-right: 60px;
  }
  .line-wrap {
    display: flex;
    margin-bottom: 40px;
  }
</style>

3.3 开始实例化jsPlumb

使用 jsPlumb.ready() 函数来初始化 jsPlumb。

<script>
  import {jsPlumb} from 'jsplumb'
  export default {
    name: 'landing-page',
    mounted () {
      let plumbIns = jsPlumb.getInstance()
      plumbIns.ready(function () {
        plumbIns.connect({
          // 对应上述基本概念
          source: 'item-1',
          target: 'item-2',
          anchor: ['Left', 'Right', 'Top', '