介绍
vis-why 是一个用于可视化算法搜索路径的 npm 包。其特点是界面简洁，易于使用，支持多种布局样式，并支持自定义数据。
安装
安装 vis-why 最简单的方法是使用 npm。
npm install vis-why
基本用法
引入库
为使用 vis-why，需要引入库的 CSS 和 JavaScript 文件。
<link href="/path/to/vis-why.css" rel="stylesheet" type="text/css" /> <script src="/path/to/vis-why.min.js"></script>
创建数据
创建一个简单的数据结构：
-- -------------------- ---- -------
----- ---- - -
------ -
- --- -- ------ --- --
- --- -- ------ --- --
- --- -- ------ --- --
- --- -- ------ --- -
--
------ -
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - --
- ----- -- --- - -
-
--创建基本图形
const container = document.getElementById('vis-why-container');
const options = {}; // optional
const network = new vis.Network(container, data);vis-why-container 是一个用于包含 vis-why 图形的 HTML 元素的 ID。
使用 new vis.Network() 可以创建一个基本的图形。第一个参数是包含图形的 HTML 元素，第二个参数是包含数据的 JavaScript 对象。
添加事件处理程序
vis-why 提供了一些默认事件，可以自定义添加事件处理程序。例如，以下代码会在用户单击节点时在控制台中打印节点 ID。
network.on('click', function(params) {
if (params.nodes.length > 0) {
console.log('Node clicked: ' + params.nodes);
}
});自定义布局
vis-why 提供了多个布局样式，例如 hierarchical、grid、random 等。以下示例代码将数据以随机布局呈现：
const container = document.getElementById('vis-why-container');
const options = { layout: { randomSeed: 2 } };
const network = new vis.Network(container, data, options);更多 vis-why 自定义选项，请参阅 API 文档。
综合示例
利用 vis-why 可以构建简单的电影票网站，以下是一些示例代码：
-- -------------------- ---- ------- ----- --------- - --------------------------------------------- -- ------ ----- ----- - --- ------------- - --- -- ------ ---- -- - --- -- ------ ---- -- - --- -- ------ ---- - --- -- ----- ----- ----- - --- ------------- - ----- -- --- - -- - ----- -- --- - - --- -- ------ ----- ---- - - ------ ------ ------ ----- -- -- -- ------- -- ----- ------- - - ------- - ------------- - ---------- ---- - -- -------- ----- -- ----- ------- - --- ---------------------- ----- ---------
结论
使用 vis-why 快速部署可视化算法搜索路径非常简单。我们可以从简单的示例开始，逐渐扩展到更复杂的项目。使用 vis-why 可以很容易地向客户展示他们的数据是如何互动的，并且使 UI 界面更加直观易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581c81e8991b448d5467