前端绘图：js-sequence-diagrams安装及入门
1.js-sequence-diagrams的作用
将简单的文本行绘制成手绘风（或是简单的直线条）的流程图。优点是不需要复杂的数据结构。
这次做一个数据可视化的网站，我和后端最后一个要攻克的问题是把dataset=[[{"228056": {"2219889": 2013}}, {"108833": {"2059058": 2013}}, {"249854": {"286000": 1997}}, "99"],[{"228056": {"694932": 2004}}, {"32830": {"456981": 2000}},{"198853": {"765569": 2004}}, {"89496": {"81251": 1989}},"99"]] 这个二维数组，转换成路径图。dataset[i]表示该树到一个叶子的路径。这个数据结构的问题就在于，路径是一条一条存的。这与网上大多数绘图所需要的json格式（类似宽度优先遍历的循环嵌套）之间，相距复杂到令我望而生畏的函数。所以这样简单的转化着实让我惊喜呀。虽然js-sequence-diagrams似乎比起表示路径，更适合表示逻辑。
示例图
2.安装
流程：①安装node，npm和 git ②安装bower ③用boewr把使用js-sequence-diagrams所必须的包一键下载到你的工程文件下。④在你的网页中引用它们
该js库基于Snap.svg,web font loader,underscore.js,jQuery,而这些东西下面也在调用其他一些更底层的js库。为了不必要的混乱不建议自己手动分别下载。而是按照官网推荐的，使用bower。
bower可以打包下载工程包。安装bower之前必须先安装node，npm和git。
①安装node，npm和git去链接到的官网上download后按照提示一直next就ok。
②打开终端命令行。输入node -v和npm -v检验自己是否安装成功，若成功会显示版本号
检验是否已安装
③在终端里输入 npm install -g bower 安装bower
④cd address 打开项目所在路径（你希望把代码包下载到的地方）
我的项目在C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\route这里，所以我在命令行里输入
cd C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\route
这时显示我已进入这个文件夹 在这个路径下输入 bower install bramp/js-sequence-diagrams
就开始一系列的下载了
图
⑤下载结束后指定路径下出现一个叫做bower_components的文件夹，里面就是使用js-sequence-diagrams所需的各种文件了。然后我们在网页里加上这些引用
<script src="bower_components/bower-webfontloader/webfont.js"></script>
<script src="bower_components/snap.svg/dist/snap.svg-min.js"></script>
<script src="bower_components/underscore/underscore-min.js"></script>
<script src="bower_components/js-sequence-diagrams/dist/sequence-diagram-min.js"></script>
<link href="bower_components/js-sequence-diagrams/dist/sequence-diagram-min.css" rel="stylesheet">
我的代码
官网上给的<script>标签的写法是 <script src="" /> 但是在我的电脑上这样写括号不匹配，会一直报错。
安装及引用部分结束。
3.入门级使用
先看看
官方给的实例代码中，用jQuery写的那个方法，我用了之后各种报错。所以就用实例一的方法。
官方实例
那么问题来了，只有一个语句的时候写"A->B:hello"就行，那么有多条语句的时候怎么办，都写在parse（" "）里面吗？js-sequence-diagrams读你给的文本时，按行读取，也就是遇到一个换行符表示下一条语句。所以我们可以这样：
在body里给两对标签，在id="diagram"的div里画图，在<pre></pre>里面存语句。现在语句我只有一条 title:route chart 我还想加
A->B:hello
B->C:hehe
C-->A:ehhh
怎么办？
用这个语句 document.getElementById('txt').innerText +="你要加的语句"+"/n" //一定不要忘记加"/n"，因为有了换行符才能构成一条语句。youtube上有一个介绍的很全面的基础使用教程，大家可以戳js-sequence-diagrams简易视频教程。（需翻墙，ps：翻墙推荐Shadowsocks）。
js-sequence-diagrams简单轻巧，之后数据处理我用了双层for循环做了简单的处理就好使了。
当当当大功告成。开心~~~
最后我画出的图是这样的
这是一棵对自己没什么要求的树，相信我。
