Vis.js--Network中文教程

英文文档：原文链接

Network

Network可以可视化地展示networks（网络）以及networks包含的nodes（节点）和edges（边）。您可以轻易地使用Network自定义形状、样式、颜色、尺寸、图案等。Network可以在任何现代浏览器上流畅地展示多达上千个nodes和edges。另外，Network也支持cluster（集群），并使用HTML canvas进行渲染。

你的第一个Network

创建一个vis network很简单，但要求您添加vis.js和css文件，您可以点击这里获取。如果您已经把这些添加到您的应用程序中，您需要制定nodes和edges。您可以使用DOT语言或者从Gephi导出nodes和edges，但我们目前还不需要这些。点击下面的选项卡，可以获得更多的相关信息。您也可以使用vis.DataSets进行动态数据绑定，比如，您可以在初始化network之后更改颜色、label（标签）或者任何选项。

拥有数据之后，您需要的就是一个div容容器，告诉vis把network放在哪里。此外，你还可以使用options对象自定义network的各个方面。代码如下所示：

以上的代码是一个最基本的例子，你可以点击这里，看看它是什么样子。

目录

目录

Options

Custom locales

Method

Events

Importing data

Gephi parser options

Import data in DOT language

 

模块

configure	生成一个具有过滤功能的交互式选项编辑器。
edges	处理edges的创建和删除，并包含全局的edges选项和样式。
groups	包含groups以及一些选项关于如何控制那些非现有组的nodes。
interaction	用于与Network所有用户的交互。处理鼠标、触摸和选择事件，以及导航按钮和弹出窗口。
layout	控制定位的初始化和分层。
manipulation	提供改变Network中数据的API和可选GUI。
nodes	处理nodes的创建和删除，并包含全局的nodes选项和样式。
physics	控制所有nodes和edges到它们最终位置的仿真移动，同时控制稳定性。

Options

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	如果为true，Network可以自动检测容器的大小，并进行相应地重绘。 如果为false，Network则在容器调整大小之后，使用redraw()和setSize()函数强制重绘。
width	String	'100%'	canvas的宽度，可以是百分比或像素(例如，'400px')。.
height	String	'100%'	canvas的高度，可以是百分比或像素(例如，'400px')。.
locale	String	'en'	选择语言环境。默认情况下，语言是英语。
locales	Object	defaultLocales	Locales对象. 默认支持 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' are supported. 请参阅下面的区域设置部分，了解如何自定义这些内容。
clickToUse	Boolean	false	当Network配置为clickToUse时，它只在激活时对鼠标和触摸事件做出反应。当激活时，网络周围显示一个蓝色阴影边框。Network通过单击设置为激活，通过单击Network外部或按ESC键将再次变为非激活。
configure	Object	Object	在configure模块中解释了此对象中的所有选项。
edges	Object	Object	在edges模块中解释了此对象中的所有选项。
nodes	Object	Object	在nodes模块中解释了此对象中的所有选项。
groups	Object	Object	在groups模块中解释了此对象中的所有选项。
layout	Object	Object	在layout模块中解释了此对象中的所有选项。
interaction	Object	Object	在interaction模块中解释了此对象中的所有选项。
manipulation	Object	Object	在manipulation模块中解释了此对象中的所有选项。
physics	Object	Object	在physics模块中解释了此对象中的所有选项。

Custom locales

locales object 格式如下：

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')并更改所有字符串。然后可以在locale选项中使用新键。

Method

这是公共API中所有方法的列表。它们按类别分类，对应于上面列出的模块。

Global methods for the network.

destroy()	Returns:none	从DOM中删除网络，并删除所有Hammer绑定和引用。
setData({nodes:vis DataSet/Array,                edges:vis DataSet/Array)}	Returns:none	覆盖网络中的所有数据。如果在物理模块中启用了稳定，网络将再次稳定。此方法也在首次初始化网络时执行。
setOptions(Object options)	Returns:none	设置选项。所有可用的选项都可以在上面的模块中找到。每个模块都需要它自己的模块名称容器来包含它的选项。
on(String event name,Function callback)	Returns:none	设置事件侦听器。根据事件的类型，回调函数会得到不同的参数。有关更多信息，请参阅文档的事件部分。
off(String event name,Function callback)	Returns:none	删除事件侦听器。您提供的函数必须与on函数中使用的函数完全相同。如果没有提供任何函数，所有监听器将被删除。有关更多信息，请参阅文档的事件部分。
once(String event name,Function callback)	Returns:none	只设置一次事件侦听器。事件发生后，事件侦听器将被删除。根据事件的类型，回调函数会得到不同的参数。有关更多信息，请参阅文档的事件部分。

 

 

 

 

Methods related to the canvas

canvasToDOM({x:Number,y:Number})	Return:Object	这个函数将画布坐标转换为DOM上的坐标。输入和输出的形式为{x:Number,y:Number}。DOM值是相对于Network容器而言。
DOMtoCanvas({x:Number,y:Number})	Return:Object	这个函数将DOM上的坐标转换为画布坐标。输入和输出的形式为{x:Number,y:Number}。DOM值是相对于Network容器而言。
redraw()	Returns:none	重绘Network。
setSize(String width,String height)	Returns:none	设置画布的大小。这是在窗口调整大小时自动完成的。

Layout

getSeed()

Returns: Number

如果您喜欢您当前Network的布局，并且希望下次以同样的方式启动，请使用此方法请求Seed并将其放入layout.randomSeed选项中。

Manipulation methods to use the manipulation system without GUI.

enableEditMode()	Returns: none	以编程方式启用编辑模式。类似于按下编辑按钮的效果。
disableEditMode()	Returns:none	编程禁用编辑模式。类似于按下关闭图标(工具栏角落的小十字)的效果。
addNodeMode()	Returns:none	进入addNode模式。不需要启用编辑模式或操作。要摆脱这种模式，请调用disableEditMode()。handlerFunctions中定义的回调函数仍然适用。要在不使用操作GUI的情况下使用这些方法，请确保设置为false。
editNode()	Returns:none	编辑选定的节点。addNodeMode的解释也适用于此。
addEdgeMode()	Returns:none	进入addEdge模式。addNodeMode的解释也适用于此。
editEdgeMode()	Returns:none	进入editEdge模式。addNodeMode的解释也适用于此。
deletedSelected()	Returns:none	删除选中。不需要启用编辑模式或操作。

Methods to get information on nodes and edges.

getPositions([Array of nodeIds])	Returns:Object	*以提供的节点作为对象返回节点在画布空间中的x y位置: {      nodeId1: {x:xValue,y:yValue},      nodeId2: {x:xValue,y:y} } 替代输入是一个包含节点id或什么都不包含的字符串。提供字符串时，返回与ID对应的节点的位置。当没有提供任何内容时，返回所有节点的位置。
storePositions()	Returns: none	*当使用vis. dataset将节点加载到网络中时，此方法将把所有节点的X和Y位置放入该数据集中。如果您正在从数据库加载节点并将其与数据集动态耦合，那么您可以使用它来稳定您的网络一次，然后通过数据集保存数据库中的位置，以便下一次加载节点时，稳定性将几乎立即稳定下来。   如果节点仍然在移动，并且使用动态平滑边缘(默认情况下是打开的)，则可以使用选项stabilization(稳定)。物理模块中只有动态边缘才能提高初始化时间。   该方法不支持聚类。目前，在使用集群时无法缓存位置，因为它们不能正确地从位置初始化。
moveNode(nodeId, Number x, Number y)	Returns: none	*您可以使用它来程序化地移动节点。提供的x和y位置必须在画布空间!
getBoundingBox(String node Id)	Returns:Object	*返回包含标签格式的节点的包围框: {      top:Number,      left:Number,      right:Number,      bottom:Number, } 这些值在画布空间中。
getConnectedNodes(String nodeId or edgeId,[String direction])	Returns:Array	*返回直接连接到此node或edge的所有nodes的nodeId数组。   对于node id，返回具有连接节点id的数组。 如果可选参数方向设置为string 'from'，则只返回父节点。 如果将方向设置为“to”，则只返回子节点。 任何其他值或未定义的值都返回父节点和子节点。   对于边缘id，返回一个数组:[fromId, toId]。边缘忽略参数方向。
getConnectedEdges(String nodeId)	Returns:Array	*返回连接到此node的edge的nodeId的数组。

Physics methods to control when the simulation should run.

startSimulation()	Returns:none	开始物理仿真。这通常是在需要的时候完成的，只有当您自己停止仿真并希望以后继续仿真时才真正有用
stopSimulation()	Returns:none	这将停止物理模拟并触发stabilized事件。它可以通过拖动节点、修改数据集或调用startSimulation()重新启动。
stabilize([iterations])	Returns:none	您可以随时手动调用stable函数。使用了上面的所有稳定选项。您可以选择提供它应该执行的迭代次数。

Selection methods for nodes and edges.

getSelection()	Returns: Object	返回一个具有选中node和edge id的对象，如下所示: { nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds] }
getSelectedNodes()	Returns: Array	返回一个选择的node id数组，如 [nodeId1, nodeId2, ..]
getSelectedEdges()	Returns: Array	返回一个选择的edge id数组，如 [edgeId1,edgeId2, ..]
getNodeAt( { x: xPosition DOM, y: yPosition DOM} )	Returns: String	返回node id或undefined 。DOM位置应该是相对于画布左上角的像素。
getEdgeAt( { x: xPosition DOM, y: yPosition DOM} )	Returns: String	返回edge id或undefined 。DOM位置应该是相对于画布左上角的像素。
selectNodes( Array with nodeIds, [Boolean highlightEdges] )	Returns: none	选择与输入数组中的id对应的nodes。如果highlightEdges显示为true或undefined，也会选择邻近的edges。该方法在选择自己的对象之前取消选择所有其他对象。不会触发事件。
selectEdges( Array with edgeIds)	Returns: none	选择与输入数组中的id对应的edges。该方法在选择自己的对象之前取消选择所有其他对象。不会触发事件。
setSelection( Object selection, [ Object options] )	Returns: none	设置选择，它必须是这样的对象: { nodes: [Array of nodeIds], edges: [Array of edgeIds] } 还可以只在选择对象中传递节点或边。可用的选项是: { unselectAll: Boolean, highlightEdges: Boolean }
unselectAll()	Returns: none	取消选择所有对象。不会触发事件。

Methods to control the viewport for zoom and animation.

getScale()	Returns: Number	返回Network的当前比例。1.0与100%等价，0表示无限缩小。
getViewPosition()	Returns: Object	以以下形式返回视图的当前焦点:{x: {Number}， y: {Number}
fit( [ Object options] )	Returns: none	缩小以使所有节点都适合画布。您可以提供自定义选项: { nodes:[Array of nodeIds], animation: { // -------------------> can be a boolean too! duration: Number easingFunction: String } } 这些节点可用于缩放，以只适合视图中的特定节点。   其他选项在下面的moveTo()描述中解释。所有选项都是fit方法的可选选项。
focus( String nodeId, [Object options] )	Returns: none	您可以使用此函数聚焦于节点。这意味着视图会锁定到那个节点，如果它在移动，视图也会相应地移动。如果视图被用户拖拽，焦点就会被打断。您可以提供选项来定制效果: { scale: Number, offset: {x:Number, y:Number} locked: boolean animation: { // -------------------> can be a boolean too! duration: Number easingFunction: String } } 除了belocked之外的所有选项都在下面的moveTo()描述中进行了解释。belocked表示在缩放动画完成后视图是否保持锁定在节点上。默认值为真。options对象在focus方法中是可选的。
moveTo( Object options )	Returns: none	您可以使用moveTo()方法移动camera。选项有: { position: {x:Number, y:Number}, scale: Number, offset: {x:Number, y:Number} animation: { // -------------------> can be a boolean too! duration: Number easingFunction: String } } position(在画布单元中!)是camera中心焦点的位置。scale是目标缩放级别。默认值是1.0。offset(以DOM单位表示)是指视图离中心的偏移量。默认值是{x:0,y:0}。对于animation，您可以使用一个布尔值来使用默认选项，或者禁用它，或者您可以手动定义持续时间(以毫秒为单位)和缓动函数。可用的有:linear, easeenquiad, easeOutQuad, easeInOutQuad, easeInCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeenquiint, easeOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint, easeInOutQuint。您必须至少定义一个比例、位置或偏移量。否则，就没什么可动的了。
releaseNode()	Returns: none	以编程方式释放focussed node。

Events

这是公共API中所有事件的列表。它们是从所有单独的模块中收集到的。

这些事件由interaction模块触发。它们与用户输入相关。

由人类交互、选择、拖动等引发的事件。

名称	属性	描述
click	Object	当用户单击鼠标或点击触屏设备时触发。传递一个属性结构为: {   nodes: [Array of selected nodeIds],   edges: [Array of selected edgeIds],   event: [Object] original click event,   pointer: {     DOM: {x:pointer_x, y:pointer_y},     canvas: {x:canvas_x, y:canvas_y}   } } 这是所有事件的共同结构。特别针对单击事件，添加了以下属性: { ...   items: [Array of click items], } 点击项目可以是: {nodeId:NodeId}            // node with given id clicked on   {nodeId:NodeId labelId:0}  // label of node with given id clicked on   {edgeId:EdgeId}            // edge with given id clicked on   {edge:EdgeId, labelId:0}   // label of edge with given id clicked on 项数组的顺序以z顺序递减。因此，要获得最上面的项，需要获取索引0处的值。
doubleClick	same as click	当用户双击鼠标或双击触摸屏设备时触发。因为双击实际上是2次单击，所以会触发2次单击事件，然后是双击事件。如果您不希望在触发双击事件时使用单击事件，只需在处理它们之前检查单击事件之间的时间间隔。
oncontext	same as click	当用户用鼠标右键单击画布时触发。默认情况下，鼠标右键不选择。如果需要，可以使用getNodeAt方法选择节点。
hold	same as click	当用户点击并握住鼠标或点击并握住触摸屏设备时触发。在本例中还会触发单击事件。
release	same as click	在canvas结束绘制后触发。可以用来绘制在Network的顶层。
select	same as click	当选择被用户操作更改时触发。这意味着已经选择了节点或边缘，添加到选择或取消选择。所有选择事件只在单击和保持时触发。
selectNode	same as click	当用户选择node时触发。
selectEdge	same as click	当用户选择edge时触发。
deselectNode	Object	当一个node或多个nodes已经被用户取消选择时触发。前面的选择是在上次用户事件之前选择的节点和边的列表。传递一个属性结构为: {   nodes: [Array of selected nodeIds],   edges: [Array of selected edgeIds],   event: [Object] original click event,   pointer: {     DOM: {x:pointer_x, y:pointer_y},     canvas: {x:canvas_x, y:canvas_y}     }   },   previousSelection: {     nodes: [Array of previously selected nodeIds],     edges: [Array of previously selected edgeIds]   } }
deselectEdge	same as deselectNode	当用户已取消选择边缘时触发。前面的选择是在上次用户事件之前选择的节点和边的列表。
dragStart	same as click	当开始拖拽时触发
dragging	same as click	在拖动node或视图时触发。
dragEnd	same as click	当拖拽结束时触发。
hoverNode	{node:nodeId}	如果启用了交互选项:{hover:true}，并且鼠标悬停在node上，则触发。
blurNode	{node:nodeId}	如果启用了交互选项:{hover:true}，并且鼠标从之前悬停的node移开，则触发。
hoverEdge	{edge:edgeId}	如果启用了选项交互:{hover:true}，并且鼠标悬停在edge上，则启动。
blurEdge	{edge:edgeId}	如果启用了选项交互:{hover:true}，并且鼠标从之前悬停的edge移开，则会触发。
zoom	Object	当用户放大或缩小时触发。属性告诉你缩放的方向。scale是一个大于0的数字，这与network.getscale()的结果相同。当单击缩放导航按钮时，传递的对象的指针属性将为空。传递一个属性结构为: {   direction: '+'/'-',   scale: Number,   pointer: {x:pointer_x, y:pointer_y} }
showPopup	id of item corresponding to popup	当弹出窗口(工具提示)显示时触发。
hidePopup	none	当弹出窗口(工具提示)隐藏时触发。

事件触发了物理模拟。可以用来触发GUI更新。

startStabilizing	none	稳定启动时发射。这也是当你拖动一个节点，物理模拟重新开始稳定的情况。稳定并不意味着“不显示”。
stabilizationProgress	Object	当到达迭代的updateInterval数目的倍数时触发。这只发生在“隐藏的”稳定状态中。传递一个属性结构为: {   iterations: Number // iterations so far,   total: Number      // total iterations in options }
stabilizationIterationsDone	none	当“隐藏”稳定完成时触发。这并不一定意味着网络是稳定的;它还可能意味着选项中定义的迭代数量已经达到。
stabilized	Object	在Network稳定或调用stopSimulation()时触发。它所花费的迭代量可以用来调整稳定Network所需的最大迭代量。传递一个属性结构为: {   iterations: Number // iterations it took }

由canvas触发的事件。

resize

Object

在调整画布大小时触发，当容器div改变大小时通过重绘调用、使用新值的setSize()调用或使用新宽度和/或高度值的setOptions()调用。传递一个属性结构为: {   width: Number     // the new width  of the canvas   height: Number    // the new height of the canvas   oldWidth: Number  // the old width  of the canvas   oldHeight: Number // the old height of the canvas }

由呈现模块触发的事件。可用于在画布上绘制自定义元素。

initRedraw	none	在重新绘制开始之前被触发。仿真步骤至此已经完成。可用于在开始绘制新框架之前移动自定义元素。
beforeDrawing	canvas context	在画布被清除、缩放和转换到查看位置之后，但在绘制所有边缘和节点之前，触发。可用于绘制网络后端。
afterDrawing	canvas context	在画布上画完后触发。可以用来绘制在网络的顶部。

由视图模块触发的事件。

animationFinished

none

动画完成时触发。

由配置模块触发的事件。

configChange

Object

当用户更改配置器中的任何选项时触发。选项对象可以与setOptions方法一起使用，也可以使用JSON.stringify()进行字符串化。您不必手动将选项放入网络中:这是自动完成的。您可以使用事件在数据库中存储用户选项。

Importing data

Network包含从Gephi和DOT language中导入数据的转换实用程序。

网络可以直接从gephi导出的json文件导入数据。您可以在这里得到JSON导出器:https://gephi.org/plugins/#/plugin/jsonexporter-plugin。存在一个示例，演示如何将JSON文件转换为Vis:

 

使用示例:

// load the JSON file containing the Gephi network.
var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in importing_from_gephi.

// you can customize the result like with these options. These are explained below.
// These are the default options.
var parserOptions = {
  edges: {
    inheritColors: false
  },
  nodes: {
    fixed: true,
    parseColor: false
  }
}

// parse the gephi file to receive an object
// containing nodes and edges in vis format.
var parsed = vis.network.convertGephi(gephiJSON, parserOptions);

// provide data in the normal fashion
var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
};

// create a network
var network = new vis.Network(container, data);

Gephi parser options

有几个选项可以用来告诉Vis如何处理来自Gephi的数据。

名称	类型	缺省值	描述
nodes.fixed	Boolean	true	When false, the nodes will move according to the physics model after import. If true, the nodes do not move at all. If set to true, the node positions have to be defined to avoid infinite recursion errors in the physics.
nodes.parseColor	Boolean	false	If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color.
edges.inheritColor	Boolean	false	When true, the color supplied by gephi is ignored and the inherit color mode is used with the global setting.

Import data in DOT language

Network supports data in the DOT language. To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT language into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other options if you'd like.

Example usage:

// provide data in the DOT language
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.network.convertDot(DOTstring);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

var options = parsedData.options;

// you can extend the options like a normal JSON variable:
options.nodes = {
  color: 'red'
}

// create a network
var network = new vis.Network(container, data, options);