使用vis-network进行图数据库可视化(一)

使用vis-network进行图数据库可视化(一)

    • 什么是vis-network
    • 安装
    • Demo
    • datas数据
      • 1.数组格式
      • 2.DataSet格式
      • 3.两者之间区别
      • 4.从Gephi导入数据
    • options配置项
      • configure
      • nodes节点
      • edges边
      • groups组
      • layout布局
      • interaction交互
      • manipulation可视化操作
      • physics物理引擎
      • cluster集群
    • methods方法
      • destroy()
      • setData({nodes, edges})
      • on、off、once
      • cluster(options)
      • clusterByConnection(nodeId,[options])
      • clusterByHubsize([hubsize],[options])
      • clusterOutliers([options])
      • isCluster(nodeId)
      • openCluster(nodeId[, options])
      • stabilize([iterations])
      • fit([options])
    • events事件
    • 按个暂停

什么是vis-network

vis-network是vis.js可视化库中的一个组件。主要用于网络可视化需求,支持自定义形状、样式、颜色、大小、图像等。vis-network可以在任务现代浏览器上流畅展示多达上千个nodes(节点)和edges(边),也支持cluster(集群),使用canvas渲染。作为图数据库可视化工具使用,效果很好。

注意:nodes、edges上千之后,已经出现卡顿现象,亲测还是小数据量下可视化效果较为理想

安装

1.npm安装

npm install vis-network

2.umd引入

<script type="text/javascript" src="../../../standalone/umd/vis-network.min.js">script>

Demo


<html>
  <head>
    <title>Vis Network | Basic usagetitle>
    <script type="text/javascript" src="./vis-network.min.js">script>
    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    style>
  head>
  <body>
    <p>Create a simple network with some nodes and edges.p>
    <div id="mynetwork">div>

    <script type="text/javascript">
      // create an array with nodes
      const 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
      const edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 },
      ]);
      
      // create a network
      const container = document.getElementById("mynetwork");
      const data = {
        nodes: nodes,
        edges: edges,
      };
      const options = {};
      const network = new vis.Network(container, data, options);
    script>
  body>
html>

官网demo示例:https://visjs.github.io/vis-network/examples/network/basicUsage.html

从demo中可以看到,使用vis-network非常简单,只需要设置containerdataoptions三个参数就行。其中container为HTML DOM元素,不做介绍,重点介绍下dataoptions

datas数据

data参数主要设置nodes和edges两个数据项,且都支持数据和vis.DataSet两种类型。具体nodes和edges的配置同下文options.nodes和options.edges。

interface Data {
  nodes?: Node[] | DataInterfaceNodes;
  edges?: Edge[] | DataInterfaceEdges;
}

1.数组格式

const nodes = [
    {id: 1, label: 'Node 1', color: 'red'},
    {id: 2, label: 'Node 2', color: 'green'},
    {id: 3, label: 'Node 3', color: 'blue'},
]
const edges = [
    {id: 1, from: 1, to: 2},
    {id: 2, from: 2, to: 3},
    {id: 3, from: 3, to: 1},
]
const datas = {
    nodes: nodes,
    edges: edges,
}

2.DataSet格式

使用示例见前文demo。

3.两者之间区别

1、DataSet有addupdateremoveclear等方法,可在初始渲染后对数据进行单独增删改操作,可进行双击查询关联node等操作(示例1,示例2);
2、DataSet数据量较大时,存在一定耗时;

4.从Gephi导入数据

Network可以直接从gephi导出的json文件中导入数据。示例

options配置项

const options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // 详细配置请查看'配置'模块,
  edges: {...},        // 详细配置请查看'边'模块,
  nodes: {...},        // 详细配置请查看'节点'模块,
  groups: {...},       // 详细配置请查看'组'模块,
  layout: {...},       // 详细配置请查看'布局'模块,
  interaction: {...},  // 详细配置请查看'交互'模块,
  manipulation: {...}, // 详细配置请'可视化操作'模块,
  physics: {...},      // 详细配置请查看'物理引擎'模块,
}

详细可参考官网可查的文档、中文文档,就是中文文档比较旧~

configure

可配置一些vis-network自带的工具项,设置样式、模型等,并能够根据用户设置生成配置项,不过实际使用过程中用到的不多。略~

nodes节点

配置节点的样式。也可以在data中配置每个节点的属性,data中的单个节点配置项将覆盖全局配置。参考

nodes: {
    shape: "circle",
    widthConstraint: { maximum: 100 },
    scaling: {
      min: 10,
      max: 30,
    },
    font: {
      size: 12,
      face: "Tahoma",
    },
}

edges边

配置边的样式。参考

edges: {
    width: 0.15,
    arrows: {
      to: {
        type: "arrow",
        enabled: true,
      },
    },
    length: 120,
    color: { inherit: "from" },
    smooth: {
      type: "continuous",
    },
}

groups组

定义每个组的样式,除了id、x、y之外,其余和node的配置项相同。

const nodes = [
    {
        id:1, 
        group:'myGroup', // 组名 myGroup
        label:"I'm in a custom group called 'myGroup'!",
    },
]

const options = {
  groups: {
    // 定义 myGroup组的样式
    myGroup: {
        color:{background:'red'}, borderWidth:3
    }
  }
}

layout布局

充当canvas上的摄像机,进行动画、缩放和对焦。

interaction交互

用于与关系网的所有用户交互。处理鼠标和触摸事件等。

manipulation可视化操作

配置vis-network自带的添加节点、添加边、编辑节点、编辑边、删除节点、删除边等工具按钮。

physics物理引擎

处理物理模拟,移动节点和边以清晰地显示它们。

cluster集群

集群配置项是提供给集群方法的配置对象。主要设置集群的样式、已经集群聚合的逻辑。参考

clusterByColor() {
    network.setData(data);
    const colors = ["orange", "lime", "DarkViolet"];
    let clusterOptionsByData;
    for (let i = 0; i < colors.length; i++) {
      let color = colors[i];
      clusterOptionsByData = {
        // joinCondition参数设置聚合逻辑
        joinCondition: childOptions => {
          return childOptions.color.background == color; // the color is fully defined in the node.
        },
        // processProperties参数可修改聚合点的属性
        processProperties: (
          clusterOptions,
          childNodes,
          childEdges
        ) => {
          let totalMass = 0;
          for (let i = 0; i < childNodes.length; i++) {
            totalMass += childNodes[i].mass;
          }
          clusterOptions.mass = totalMass;
          return clusterOptions;
        },
        // 初始设置聚合点属性
        clusterNodeProperties: {
          id: "cluster:" + color,
          borderWidth: 3,
          shape: "database",
          color: color,
          label: "color:" + color,
        },
      };
      network.cluster(clusterOptionsByData);
    }
}

集群相关方法和事件在后文全局方法和事件中

methods方法

列举一些平时较为常用的方法,全量方法可参考中文文档

destroy()

从dom上移出network实例,dom仍然存在

const network = vis.network(container, data, options)

network.destroy()

setData({nodes, edges})

覆盖关系图中的所有数据

network.setData({
    nodes: [...],
    edges: [...]
})
or
network.setData({
    nodes: vis.DataSet([...]),
    edges: vis.DataSet([...])
})

on、off、once

事件监听,常规的,略~

cluster(options)

手动进行集群操作

clusterOptionsByData = {
    joinCondition: function (childOptions) {
      return childOptions.color.background === color; // the color is fully defined in the node.
    },
    processProperties: function (
      clusterOptions,
      childNodes,
      childEdges
    ) {
      var totalMass = 0;
      for (var i = 0; i < childNodes.length; i++) {
        totalMass += childNodes[i].mass;
      }
      clusterOptions.mass = totalMass;
      return clusterOptions;
    },
    clusterNodeProperties: {
      id: "cluster:" + color,
      borderWidth: 3,
      shape: "database",
      color: color,
      label: "color:" + color,
    },
};
network.cluster(clusterOptionsByData);

clusterByConnection(nodeId,[options])

将指定的节点、与其连接的节点组成一个集群

network.clusterByConnection(1);

clusterByHubsize([hubsize],[options])

设置当节点连接的边超过一定数量(hubsize)后聚合

var clusterOptionsByData = {
  processProperties: function (clusterOptions, childNodes) {
    clusterOptions.label = "[" + childNodes.length + "]";
    return clusterOptions;
  },
  clusterNodeProperties: {
    borderWidth: 3,
    shape: "box",
    font: { size: 30 },
  },
};
network.clusterByHubsize(undefined, clusterOptionsByData);

clusterOutliers([options])

将所有具有1个边的节点与它们各自的连接节点组成一个集群,就是将最边缘的叶子节点和它连接的节点聚合

network.clusterOutliers();

isCluster(nodeId)

判断id=nodeId的节点是否为集群

network.on("selectNode", function (params) {
    if (params.nodes.length == 1) {
      if (network.isCluster(params.nodes[0]) == true) {
        network.openCluster(params.nodes[0]);
      }
    }
});

openCluster(nodeId[, options])

打开集群。nodeId为集群id;options可选,目前只支持一个选项releaseFunction,该函数可用于在集群打开后手动定位节点(用的不多)

// 同isCluster

stabilize([iterations])

稳定布局。iterations参数可选,指定迭代次数。数据量小时,可以快速稳定布局,满足部分业务需求。数据量较大时,慎用!比较耗时,卡顿感和明显。

network.stabilize();
network.stabilize(20);

fit([options])

缩放所有节点以适应canvas

network.fit()

events事件

全量事件文档请参考中文文档

常用事件如下:

  • click 左键单击,network全局
  • doubleClick 双击,network全局
  • oncontext 右键单击,network全局
  • selectNode 选中节点
  • selectEdge 选中边
  • deselectNode 取消选中节点
  • deselectEdge 取消选中边
  • hoverNode 鼠标悬浮节点
  • hoverEdge 鼠标悬浮边
  • blurNode 从节点移开
  • blurEdge 从边移开
  • startStabilizing 开始稳定
  • stabilizationIterationsDone 稳定结束

按个暂停

先把vis-network介绍部分写完,下篇介绍可视化工具

你可能感兴趣的:(javascript,vue,可视化,js,网络图,数据库)