前端绘图：js-sequence-diagrams安装及入门 - 简书

安宇雨 - 随手采集
2019-09-26 20:27:44
随手采集
0000-未整理-等待研究

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>标签的写法是 <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循环做了简单的处理就好使了。