vis
1、简述
这里面有些是根据自己的理解解释的，有些还没有用到的暂时就只取了百度的翻译，文档也不是全的，以后再补充，请结合自己的理解使用。
vis.js 基于浏览器的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。该库由组件DataSet，Timeline，Network，Graph2d和Graph3d组成。
2、Network
network实例请参考官网：http://visjs.org/network_examples.html。
network是一种可视化的网络和网络组成的nodes节点和edges边缘。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化工作在任何现代浏览器上都能达到几千个节点和边缘。为了处理更大数量的节点，网络具有集群支持。网络使用HTML画布进行渲染。
3、Network创建
创建一个Network类型的vis是很容易的。要求您包括vis.js和css文件，这些文件可以在这里得到。如果将这些添加到应用程序中，则需要指定节点和边缘。如果你愿意，你可以使用Gephi的点语言或导出节点和边，但是现在我们将不用这些。有关此信息的更多信息，请单击下面的标签。您还可以使用vis.DataSets进行动态数据绑定，例如，在初始化网络之后更改颜色、标签或任何选项。
一旦你有了数据，你所需要的就是一个容器p来告诉你在哪里放置你的网络。此外，您可以使用选项对象自定义网络的许多方面。在代码中，这看起来像：
<html>
<head>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p id="mynetwork"></p>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// initialize your network!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
上面的代码的结果将是这里显示的基本示例。
4、Network模块
| 模块名 | 模块描述 |
|---|---|
| configure | 生成具有过滤功能的交互式选项编辑器。 |
| edges | 处理边缘的创建和删除，并包含全局边缘选项和样式。 |
| groups | 包含如何处理不存在组的节点的组和一些选项。 |
| interaction | 用于与网络的所有用户交互。处理鼠标和触摸事件以及选择以及导航按钮和弹出窗口。 |
| layout | 管理的初始和分级定位。 |
| manipulation | 提供API和可选的GUI来更改网络中的数据。 |
| nodes | 处理节点的创建和删除，并包含全局节点选项和样式。 |
| physics | 所有的模拟移动节点和边缘到它们的最终位置，也支配稳定。 |
5、Network参数
var options = {
autoResize: true,
height: '100%',
width: '100%'
locale: 'en',
locales: locales,
clickToUse: false,
configure: {...}, // defined in the configure module.
edges: {...}, // defined in the edges module.
nodes: {...}, // defined in the nodes module.
groups: {...}, // defined in the groups module.
layout: {...}, // defined in the layout module.
interaction: {...}, // defined in the interaction module.
manipulation: {...}, // defined in the manipulation module.
physics: {...}, // defined in the physics module.
}
network.setOptions(options);
下面将解释各个选项。参考模块的解释在相应的模块中解释。
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| autoResize | Boolean | true | 如果为真，网络将自动检测其容器的大小，并相应地重新绘制。如果为false，则在使用函数redraw()和setSize()重新调整容器的大小之后，强制重新绘制网络。 |
| width | String | ‘100%’ | 画布的宽度。可以是百分比或像素（例如'400 px'）。 |
| height | String | ‘100%’ | 画布的高度。可以是百分比或像素（例如'400 px'）。 |
| locale | String | ‘en’ | 区域设置，默认语言为英语。 |
| locales | Object | defaultLocales | 区域对象。默认情况下，’en’, ‘de’, ‘es’, ‘it’, ‘nl’ ‘pt-br’, ‘ru’ 都被支持。请看下面的区域设置部分，以说明如何自定义这一点。 |
| clickToUse | Boolean | false | 当网络配置为clickToUse时，只有当激活时，它才会对鼠标和触摸事件做出反应。当活动时，网络周围会显示蓝色阴影边框。通过单击它来激活网络，并通过单击网络外部或按ESC键将其再次更改为无效。 |
locales具有以下格式：
var locales = {
en: {
edit: 'Edit',
del: 'Delete selected',
back: 'Back',
addNode: 'Add Node',
addEdge: 'Add Edge',
editNode: 'Edit Node',
editEdge: 'Edit Edge',
addDescription: 'Click in an empty space to place a new node.',
edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
createEdgeError: 'Cannot link edges to a cluster.',
deleteClusterError: 'Clusters cannot be deleted.',
editClusterError: 'Clusters cannot be edited.'
}
}
如果要定义自己的区域设置，可以更改（EN）的键并更改所有字符串。然后可以在区域设置选项中使用新的键。visjs默认是不支持中文国际化的，你可以这么修改一下：
var options={
locale: 'cn',
locales: {
cn: {
edit: '编辑',
del: '删除选定',
back: '返回',
addNode: '添加节点',
addEdge: '添加关联',
editNode: '编辑节点',
editEdge: '编辑关联',
addDescription: '单击空白处来放置一个新节点。',
edgeDescription: '单击一个节点并拖动到另一个节点以连接它们。',
editEdgeDescription: '单击控制点并将其拖动到节点以连接到它。',
createEdgeError: '无法将边缘链接到集群。',
deleteClusterError: '不能删除集群。',
editClusterError: '不能编辑集群。'
}
}
}
6、Network方法
这是公共API中所有方法的列表。它们已按类别分组，与上面列出的模块相对应。
- network的全局方法。
| 方法 | 返回值 | 描述 |
|---|---|---|
| destroy() | Returns: none | 从DOM中删除network并删除所有的锤头绑定和引用。 |
| setData({nodes: vis DataSet/Array,edges: vis DataSet/Array}) | Returns: none | 重写网络中的所有数据。如果在物理模块中启用稳定，则网络将再次稳定。当第一次初始化网络时也执行该方法。 |
| setOptions(Object options) | Returns: none |
相关链接
1、程序员分类目录导航