Vis.js--Network中文教程

最新推荐文章于 2024-06-06 11:39:14 发布
最新推荐文章于 2024-06-06 11:39:14 发布
阅读量2.5w 收藏 60
点赞数 14
分类专栏： visjs

英文文档：原文链接

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的各个方面。代码如下所示：

<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>
<div id="mynetwork"></div>

<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>

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

目录

目录

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);

下面解释了各个选项。在相应的模块中解释了涉及到模块的部分。

名称类型缺省值描述
autoResizeBooleantrue

如果为true，Network可以自动检测容器的大小，并进行相应地重绘。

如果为false，Network则在容器调整大小之后，使用redraw()和setSize()函数强制重绘。

widthString'100%'canvas的宽度，可以是百分比或像素(例如，'400px')。.
heightString'100%'canvas的高度，可以是百分比或像素(例如，'400px')。.
localeString'en'选择语言环境。默认情况下，语言是英语。
localesObjectdefaultLocalesLocales对象. 默认支持 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' are supported. 请参阅下面的区域设置部分，了解如何自定义这些内容。
clickToUseBooleanfalse当Network配置为clickToUse时，它只在激活时对鼠标和触摸事件做出反应。当激活时，网络周围显示一个蓝色阴影边框。Network通过单击设置为激活，通过单击Network外部或按ESC键将再次变为非激活。
configureObjectObject在configure模块中解释了此对象中的所有选项。
edgesObjectObject在edges模块中解释了此对象中的所有选项。
nodesObjectObject在nodes模块中解释了此对象中的所有选项。
groupsObjectObject在groups模块中解释了此对象中的所有选项。
layoutObjectObject在layout模块中解释了此对象中的所有选项。
interactionObjectObject在interaction模块中解释了此对象中的所有选项。
manipulationObjectObject在manipulation模块中解释了此对象中的所有选项。
physicsObjectObject在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模块触发。它们与用户输入相关。

由人类交互、选择、拖动等引发的事件。
名称属性描述
clickObject

当用户单击鼠标或点击触屏设备时触发。传递一个属性结构为:

{
  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处的值。

doubleClicksame as click当用户双击鼠标或双击触摸屏设备时触发。因为双击实际上是2次单击，所以会触发2次单击事件，然后是双击事件。如果您不希望在触发双击事件时使用单击事件，只需在处理它们之前检查单击事件之间的时间间隔。
oncontextsame as click当用户用鼠标右键单击画布时触发。默认情况下，鼠标右键不选择。如果需要，可以使用getNodeAt方法选择节点。
holdsame as click当用户点击并握住鼠标或点击并握住触摸屏设备时触发。在本例中还会触发单击事件。
releasesame as click在canvas结束绘制后触发。可以用来绘制在Network的顶层。
selectsame as click当选择被用户操作更改时触发。这意味着已经选择了节点或边缘，添加到选择或取消选择。所有选择事件只在单击和保持时触发。
selectNodesame as click当用户选择node时触发。
selectEdgesame as click当用户选择edge时触发。
deselectNodeObject

当一个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]
  }
}
deselectEdgesame as deselectNode当用户已取消选择边缘时触发。前面的选择是在上次用户事件之前选择的节点和边的列表。
dragStartsame as click当开始拖拽时触发
draggingsame as click在拖动node或视图时触发。
dragEndsame 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移开，则会触发。
zoomObject

当用户放大或缩小时触发。属性告诉你缩放的方向。scale是一个大于0的数字，这与network.getscale()的结果相同。当单击缩放导航按钮时，传递的对象的指针属性将为空。传递一个属性结构为:

{
  direction: '+'/'-',
  scale: Number,
  pointer: {x:pointer_x, y:pointer_y}
}
showPopupid of item corresponding to popup当弹出窗口(工具提示)显示时触发。
hidePopupnone当弹出窗口(工具提示)隐藏时触发。
事件触发了物理模拟。可以用来触发GUI更新。
startStabilizingnone稳定启动时发射。这也是当你拖动一个节点，物理模拟重新开始稳定的情况。稳定并不意味着“不显示”。
stabilizationProgressObject

当到达迭代的updateInterval数目的倍数时触发。这只发生在“隐藏的”稳定状态中。传递一个属性结构为:

{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}
stabilizationIterationsDonenone当“隐藏”稳定完成时触发。这并不一定意味着网络是稳定的;它还可能意味着选项中定义的迭代数量已经达到。
stabilizedObject

在Network稳定或调用stopSimulation()时触发。它所花费的迭代量可以用来调整稳定Network所需的最大迭代量。传递一个属性结构为:

{
  iterations: Number // iterations it took
}
由canvas触发的事件。
resizeObject

在调整画布大小时触发，当容器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
}
由呈现模块触发的事件。可用于在画布上绘制自定义元素。
initRedrawnone在重新绘制开始之前被触发。仿真步骤至此已经完成。可用于在开始绘制新框架之前移动自定义元素。
beforeDrawingcanvas context在画布被清除、缩放和转换到查看位置之后，但在绘制所有边缘和节点之前，触发。可用于绘制网络后端。
afterDrawingcanvas context在画布上画完后触发。可以用来绘制在网络的顶部。
由视图模块触发的事件。
animationFinishednone动画完成时触发。
由配置模块触发的事件。
configChangeObject当用户更改配置器中的任何选项时触发。选项对象可以与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.fixedBooleantrueWhen 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.parseColorBooleanfalseIf 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.inheritColorBooleanfalseWhen 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);

 

divaliu1408
关注
  • 14
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue 集成 vis-network 实现网络拓扑图的方法
12-11
vis.js  网站 https://visjs.org/ vs  code 下安装命令 npm install vis-network 在vue  下引入 vis-network组件 const vis = require("vis-network/dist/vis-network.min.js"); require("vis-network/dist/vis-network.min.css"); 例子代码使用 let DIR = "/jtopo/"; let nodes = [ { id: 1, shape: "circularImage", image: DIR + "server
vis拓扑图demo
07-23
vis拓扑图的使用demo，有动态和立体效果
Echarts基础学习 4-折线图实战（工作任务）
最新发布
qkdgz的博客
06-06 716
Echarts学习，折线图，实战
vis-network-client:大型网络可视化Web项目的客户端，使用React和D3
03-19
可见网络客户端示例 一个完整的大规模可视化网络项目的Web客户端使用React。 D3.js，TypeScript。很高兴为它做贡献。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行该应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。此命令将从您的项目中删除单个生成依赖项。
Vue 使用 vis-network 绘制网络关系图
共勉
04-20 8708
visjs 提供了一个网络视图模块，提供给我们绘制网络之间的各个点、线之间的关系，这个的话就比较类似于echarts的地图，在地图上打点画线的逻辑，区别在于使用visjs可以拖动节点的位置、以及visjs里面还有对物理引擎等的引入。 网络是一种可视化，用于显示由节点和边组成的网络和网络。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行，最多可容纳数千个节点和边。为了处理大量节点，Network 支持集群。
vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图
章小鱼的博客
08-29 1378
【代码】vue2使用 vis-network 和 vue-vis-network 插件封装一个公用的关联关系图。
vis.js:VIS JS网络
05-20
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（webp
初识vis.js网络拓扑图,首先了解一下官方文档以及vis.js的中文文档
笑到世界都狼狈的博客
09-09 1万+
首先说明一下，为什么要学习这个东西，，，，因为我们项目中要做一个网络拓扑图，去年网上找了找用jtopo做的，然后大家说太丑了，操作也不好，反正言外之意就是要换个插件写，，，，然后我前两周就研究了一下echarts的树图和关系图graph,研究的结果我博客也有写，总的来说echarts蛮漂亮的，但是偏展示，后期如果要加很多扩展内容的话，不建议用。如果有需要可以去看echarts例子的可以去看看https://blog.csdn.net/qq_36509946/category_10330384.html 接
【visjs】使用visjs绘制关系图
LuviaWu的博客
12-18 2060
附上链接： vis网站 visjs中文使用说明文档 使用步骤： 1、安装 npm install vis-network 2、在页面中引入 <div id="mynetwork" class="myChart" :style="{width: '100%', height: '90vh'}"></div> require('vis-network/dist/dist/vis-network.min.css') const vis = require('vis-network/di
videojs中文文档详解
热门推荐
谢泽的网络日志
07-05 32万+
最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 官方网站 点此下载videojs.6.0.0 入门使用 引入video.js和video-js.css，使用video标签就像下面这样： &amp;lt;video id=&quot;e...
vue集成vis-network实现拓扑图
huangjhai的博客
06-22 2195
vue集成vis-network实现拓扑图
visjs使用小记
01-22
Vis.js 是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。该项目是由Almende B.V公司开发的，包含 DataSet、Timeline和Graph组件。
vis-react:基于vis.js的数据可视化库
05-30
使用 vis.js 显示漂亮网络图的 React 组件 请务必访问以获取更多信息。 渲染的图形是可滚动、可缩放、视网膜就绪、动态的，并在双击时切换布局。 由于 vis.js 的命令性质，更新图形属性会导致图形的完全重绘并将其...
neovis.js：Neo4j + vis.js = neovis.js。 使用Neo4j中的数据在浏览器中图形化可视化
02-05
neovis.js 由vis.js支持的图形可视化以及来自Neo4j的数据。产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘...
vue-vis-network:Vue 2与https集成
05-08
npm install --save vis-util vis-data vis-network vue-vis-network 或者 yarn add vis-util vis-data vis-network vue-vis-network 用法 声明组件 import { Network } from "vue-vis-network" ; Vue . component ...
脚本类vis.js
04-28
2. **Network**: vis.js的网络模块用于创建和展示网络图，如关系图或依赖图。它支持节点和边的动态添加、删除、更新，以及各种动画效果，如碰撞检测和物理模拟，使得网络图更具互动性。 3. **Graph2d**: 这个组件...
可视化库Vis.js.zip
07-19
Vis.js 是一个动态的基于浏览器的可视化库，特点是易用，可处理大量的动态数据，并与这些数据进行交互操作。该库包含 DataSet, Timeline, and Graph.示例代码：<!doctype html> <html> <head>  &lt...
使用vis-network进行图数据库可视化（一）
顺拐小乌龟的博客
02-23 3842
使用vis-network进行图数据库可视化（一）什么是vis-network安装Demodatas数据1.数组格式2.DataSet格式3.两者之间区别4.从Gephi导入数据options配置项configurenodes节点edges边groups组layout布局interaction交互manipulation可视化操作physics物理引擎cluster集群methods方法destroy()setData({nodes, edges})on、off、oncecluster(options)cl
Vis.js教程（二）：基础关系图实现
WwLK123的博客
12-05 1082
Vis.js的基础关系图使用
vis.js节点移动相关教程
04-04
vis.js是一个用于可视化网络、图表和数据的JavaScript库。它提供了许多功能，包括节点移动和位置设置。以下是vis.js节点移动相关的教程。 1. 开始使用vis.js 在开始使用vis.js之前，需要引入vis.js库和vis.css样式文件。可以从vis.js官方网站上下载最新版本的vis.js库和vis.css样式文件，然后将它们添加到HTML页面中。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <script type="text/javascript"> // your code here </script> </body> </html> ``` 2. 创建一个简单的网络 在vis.js中，可以使用vis.Network对象来创建网络。首先，需要创建一个HTML元素，用于显示网络。然后，可以创建一个vis.Network对象，将其绑定到该HTML元素，并设置节点和边的数据。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vis.js Node Move Tutorial</title> <link rel="stylesheet" type="text/css" href="vis.css"> <script type="text/javascript" src="vis.js"></script> </head> <body> <div id="network"></div> <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: 2}, {from: 1, to: 3}, {from: 2, to: 4}, {from: 2, to: 5} ]); // create a network var container = document.getElementById('network'); var data = {nodes: nodes, edges: edges}; var options = {}; var network = new vis.Network(container, data, options); </script> </body> </html> ``` 3. 启用节点移动 要启用节点移动，需要在创建vis.Network对象时，将moveable选项设置为true。可以通过options对象来设置该选项。 ```javascript var options = {moveable: true}; var network = new vis.Network(container, data, options); ``` 现在，可以在网络中拖动节点并放置到新的位置。 4. 监听节点移动事件 如果希望在节点移动时执行一些代码，可以监听节点移动事件。可以通过vis.Network对象的on方法来注册事件处理程序。 ```javascript network.on('dragEnd', function(params) { console.log(params.nodes[0] + ' was moved to x:' + params.pointer.canvas.x + ', y:' + params.pointer.canvas.y); }); ``` 上面的代码将在节点移动结束时，将节点ID和新位置的坐标输出到控制台。 5. 限制节点移动范围 有时，希望限制节点移动的范围，以保持网络的视觉效果。可以通过设置节点位置的边界来实现。可以在options对象中设置nodes选项，将其设置为一个对象，该对象包含每个节点的初始位置和位置边界。 ```javascript var options = { moveable: true, nodes: { 1: {x: 100, y: 100, fixed: true, borderWidth: 1, shape: 'circle', color: {background:'red', border:'black'}}, 2: {x: 300, y: 100, borderWidth: 1, shape: 'circle', color: {background:'blue', border:'black'}, physics: false}, 3: {x: 100, y: 300, borderWidth: 1, shape: 'circle', color: {background:'green', border:'black'}, physics: false}, 4: {x: 300, y: 300, borderWidth: 1, shape: 'circle', color: {background:'yellow', border:'black'}, physics: false} } }; ``` 如上所示，节点1的位置已经被固定，而其他节点则没有被固定，并且可以在屏幕上移动。 6. 停用节点移动 要停用节点移动，设置moveable选项为false即可。 ```javascript var options = {moveable: false}; var network = new vis.Network(container, data, options); ``` 现在，节点将无法移动。 以上就是vis.js节点移动相关的教程。通过这些教程，您可以在vis.js中轻松地启用节点移动，监听节点移动事件，限制节点移动范围，并停用节点移动。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值