JavaScript 网络图可视化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8753667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript network graph visualization
提问by kannan
I need a network visualization graph(not chart) in javascript for json input. I also used JIT infovis toolkit rgraph and space tree to show multi levels in the graph. But nodes getting collapsed for huge data. In rgraph, edge arroheads merged with nodes,in space tree if child has 4 parents its placing the child too wide. so its not stable for large volume of data. But i couldnt find graphs similar to infovis json input format. Please suggest me alternative or solutions to solve infovis space tree and rgraph. Thanks in advance
我需要一个用于 json 输入的 javascript 网络可视化图（不是图表）。我还使用了 JIT infovis 工具包 rgraph 和空间树来显示图中的多层次。但是节点因大量数据而崩溃。在 rgraph 中，边箭头与节点合并，在空间树中，如果孩子有 4 个父母，则孩子的位置太宽了。所以它对于大量数据不稳定。但我找不到类似于 infovis json 输入格式的图表。请建议我解决 infovis 空间树和 rgraph 的替代方案或解决方案。提前致谢
回答by Agnius Vasiliauskas
As for me - I prefer vis.js, because :
至于我 - 我更喜欢vis.js，因为：
- Generated network is elastic - adapts automatically to user network re-shaping
- Some useful UI features are integrated - such as zoom-in/zoom-out
- Network is highly customizable,- edge colors, width, etc...
- When defining network nodes - no need to specify X,Y coordinates for
nodes.
(I've seen some lib's where you need to define X,Y coords for nodes, and that really sucks) - Not to mention that it is very easy to use this libarary,- see below:
- 生成的网络具有弹性 - 自动适应用户网络重塑
- 集成了一些有用的 UI 功能 - 例如放大/缩小
- 网络是高度可定制的，边缘颜色、宽度等...
- 定义网络节点时 - 无需为节点指定 X、Y 坐标。
（我见过一些需要为节点定义 X、Y 坐标的库，这真的很糟糕） - 更不用说使用这个库非常容易，见下文：
Usage:
用法：
// 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, width: 1},
{from: 1, to: 2, width: 6},
{from: 2, to: 4, width: 1},
{from: 2, to: 5, width: 3},
{from: 2, to: 3, width: 1},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
回答by Ed Hagen
回答by turtledove
As far as I know, there are a few open source js projects to work on graph visualization.
据我所知，有一些开源 js 项目可以用于图形可视化。
- JIT, which you are using.
- arborjs
- protovisfrom Stanford. It seems great, but it is no longer under active development.
To be honest, I have never used them in my project. You can try them yourself.
老实说，我从未在我的项目中使用过它们。你可以自己试试。
回答by nemesisdesign
Checkout netjsongraph.js, a simple javascript library based on D3 that uses the NetJSONformat, which is specifically designed for networking software.
查看netjsongraph.js，这是一个基于 D3 的简单 JavaScript 库，使用NetJSON格式，专为网络软件设计。
See the netjsongraph demo example.
I hope it helps.
我希望它有帮助。
回答by jancha
You might want to check out this interactive HTMl5 charts library, provided by Data Visualization Software Lab:
您可能想查看这个由数据可视化软件实验室提供的交互式 HTMl5 图表库：
http://datavisualizationsoftwarelab.com/
http://datavisualizationsoftwarelab.com/
This SDK lets you create wide range of charts:
此 SDK 可让您创建范围广泛的图表：
- Time based charts
- Network charts
- Pie charts
- Coming soon are Geo charts, facet charts and XML Charts
- 基于时间的图表
- 网络图表
- 饼状图
- 即将推出地理图表、构面图表和 XML 图表
Graphs are pure HTML5, no dependancies on other libs, thus easy to integrate with any JS framework (such as jQuery). Uses Canvas for rendering, has full multi-touch support for navigation, interaction and exploration of data.
图是纯 HTML5，不依赖其他库，因此很容易与任何 JS 框架（如 jQuery）集成。使用 Canvas 进行渲染，对导航、交互和数据探索具有完整的多点触控支持。
An example of network chart:
网络图示例：
Charts come with extensive API and Settings, so you can control every aspect of the charts.
图表带有广泛的 API 和设置，因此您可以控制图表的各个方面。
