Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

跨端修炼者
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

    • vis-network 入门
    • vis-network 功能预览
    • vis-network 模块系统
    • vis-network 配置项
    • vis-network Methods(方法)
    • vis-network Cluster(集群配置项)
    • vis-network 事件
    • vis-network 从外部导入数据
      • 从Gephi导入数据
        • Gephi解析器配置项
      • 以DOT语言导入数据
    • vis-network configure
    • vis-network edges(边)
    • vis-network nodes(节点)
    • vis-network groups(组)
    • vis-network layout(布局)
    • vis-network interaction(交互)
    • vis-network manipulation(可视化操作)
    • vis-network physics(物理引擎,物理模拟)
  • fabricJS中文文档

  • paperJS中文文档

  • pixiJS教程

  • spritejs

  • 数据可视化
  • vis-network中文文档
Ame
2020-06-02

vis-network 从外部导入数据

vis-network内置了从Gephi或DOT语言导入数据的一系列实用工具

# 从Gephi导入数据

Network可以直接从gephi导出的json文件中导入数据。您可以在这里获得[JSON导出器](https://gephi.org/plugins//plugin/json exporter-plugin)

示例J将演示如何将JSON文件放入到VIS中:

// 加载包含 Gephi关系数据的 JSON 文件。
var gephiJSON = loadJSON("./datasources/WorldCup2014.json");

// 你可以使用这些选项来自定义处理数据的方式。
//默认选项
var parserOptions = {
  edges: {
    inheritColors: false
  },
  nodes: {
    fixed: true,
    parseColor: false
  }
}

// 解析gephi文件并返回数据对象
// 包含满足vis要求的nodes与edges数据
var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);

// 按照vis-network格式放入数据
var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
};

// 创建关系图
var network = new vis.Network(container, data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Gephi解析器配置项

以下选项可以用来告诉VIS如何处理Gephi的数据。

名称 类型 默认 描述
nodes.fixed Boolean true 如果为false,则在导入后节点将根据物理模型移动。如果为真,则节点将不会移动。如果设置为true,则必须定义节点位置,以避免在物理模拟过程中出现‘无穷迭代’。
nodes.parseColor Boolean false 如果为true,颜色将由VIS解析器解析,为``border、highlights和hover`设置额外的颜色。如果为false,该节点将会是为其提供的颜色。
edges.inheritColor Boolean false 如果为true,则忽略gephi提供的颜色,并将继承颜色模式与全局配置项一起使用。

# 以DOT语言导入数据

Network支持DOT语言的数据。你可以使用vis.parseDOTNetwork转换器将DOT语言转换为Network兼容的节点、边和选项对象。当然你也可以修改或扩展返回的节点、边和选项。

示例:

// 用DOT语言提供数据
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.parseDOTNetwork(DOTstring);

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

var options = parsedData.options;

// 你可以像普通 JSON 变量一样扩展选项:
options.nodes = {
  color: 'red'
}

// 创建关系图
var network = new vis.Network(container, data, options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑 (opens new window)
上次更新: 2020/06/03, 17:06:00
vis-network 事件
vis-network configure

← vis-network 事件 vis-network configure →

最近更新
01
http状态码
04-18
02
el-lists
02-13
03
test
02-13
更多文章>
Theme by ame | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式