gson 显示 mysql数据,InteractiveGraph: InteractiveGraph 为大型图数据提供了一个基于web的交互操作框架，其数据可以来自于GSON文件，或者在线Neo4j图...

InteractiveGraph

InteractiveGraph 为大型图数据提供了一个基于web的交互操作框架，其数据可以来自于GSON文件，或者在线Neo4j图数据库。

InteractiveGraph 同时也提供了三个基于本框架的应用：GraphNavigator, GraphExplorer 和 RelFinder。

快速开始(Quick Start)

Step 2. 解压examples.zip，并将其部署在Web服务器上(比如Tomcat)。 如果不使用Web服务器，通过AJAX读取数据时将会出错。

把 example1.html 改为 examples2.html 或 examples3.html, 等，即可试用三个不同应用。

使用方法(How to use)

Step 1. 下载 interactive-graph-.zip(如interactive-graph-0.1.0.zip) :

https://github.com/grapheco/InteractiveGraph/dist/

Step 2. 解压 interactive-graph-.zip, 将得到两个文件: interactive-graph.min.js 和 interactive-graph.min.css.

Step 3. 在HTML中引入 .js 和 .css 文件，比如：

Step 4. 使用在 igraph 中定义的函数和类：

igraph.i18n.setLanguage("chs");

var app = new igraph.GraphNavigator(document.getElementById('graphArea'));

app.loadGson("honglou.json");

按上述步骤操作，将会使用honglou.json中的数据创建一个 GraphNavigator 应用对象。

如若需要扩展应用，可以根据GraphNavigator或其他应用写衍生类，也可以通过使用 MainFrame 直接创建新的应用.

参考手册(Reference manual)

接口(InteractiveGraph API)

项目依赖(dependencies)

在开发InteractiveGraph时，依赖了一些开源项目，包括但不仅限于visjs, npm, gulp, jQuery, jQueryUI, Font Awesome。

主框架及应用(MainFrame, applications)

InteracticeGraph 提供了一个MainFrame框架，它实际上对Web UI,事件处理和图数据连接的包装，并为用户提供了简洁易用的接口。

控件(controls)

如上所示，MainFrame包括了一个主图形渲染画布，一组导航按钮，以及搜索栏，工具栏，信息框，高亮控件等控件。

一些控件是带有Web UI的，比如信息框，消息框等. 但是其他一些组件是没有UI的，比如HighlightNode控件和ExpansionCtrl等控件等。

在InteractiveGraph中，我们定义了一个Control类，以及它的两个衍生类UIControl(带UI的控件)和BGControl(不带UI的后台控件)。

下表所列是项目中的全部控件。

控件(control)

功能(function)

类型(type)

ConnectCtrl

显示加载数据对话框

UIControl

ExpansionCtrl

双击时，展开节点

BGControl

HighlightNodeCtrl

为选中的图节点设置高亮

BGControl

InfoBoxCtrl

点击图节点时显示信息框

UIControl

MessageBoxCtrl

按需显示消息框

UIControl

RelFinderCtrl

在图节点间搜索联系

BGControl

RelFinderDialogCtrl

显示用于用户部署搜索任务的对话框

UIControl

SearchBarCtrl

显示用于关键词输入的搜索条

UIControl

ToolbarCtrl

显示工具栏

UIControl

主题(theme)

略

事件处理(event handling)

主框架(MainFrame)及其控件通过事件与应用通信。例如，当窗口大小被调整，主框架及其所有控件将会接收到FRAME_RESIZE事件。

如需订阅事件，可以通过主框架或控件调用on(event, handler)。相反，若需要取消订阅，可以使用off(event, handler)方法。

如果需要向主框架发送事件，可以使用MainFrame.emit(event, args)或MainFrame.fire(event, args)方法。不同于emit()方法的是，fire()在执行发送动作之前，会将包括mainFrame, htmlMainFrame和theme在内的上下文信息置入到args.如果想向控件发送事件，可以使用emit(event, args)方法。

数据连接(data connector)

主框架通过Connector加载数据，Connector可能连接到LocalGraph或RemoteGraph.其中LocalGraph是一次性从GSON对象或文件中一次性加载全部数据，而RemoteGraph则在本地没有缓存数据时，与远程图服务器交互，从中获取数据和服务。

GSON

主框架以GSON格式从LocalGraph中读取数据。GSON实际上是一种针对于图数据的强化的JSON格式.其强化之处在于，GSON可以识别function，而这在JSON中是不合法的。

GSON 由一些数据项组成，其定义如下：

export interface GSON {

"data": {

nodes: object[];

edges?: object[];

}

"dbinfo"?: object;

"categories"?: object;

"translator"?: {

"nodes"?: (node: object) => void;

"edges"?: (node: object) => void;

};

}

此处，translator是对于图中节点和边的翻译函数的定义，框架加载数据时会调用这个函数。示例如下，在这个例子中，在加载时为每个节点的description赋值。

"translator": {

"nodes": function (node) {

//set description

if (node.description === undefined) {

var description = "

";

description += "
";

description += "" + node.label + "" + "[" + node.id + "]";

description += "

";

node.description = description;

}

},

}

数据集(Datasets)

示例中以.json文件的形式提供了两个GSON数据集：honglou.json, WorldCup2014.json.

honglou.json

honglou.json数据集来自于中国古典名著《红楼梦》(又名《石头记》，https://en.wikipedia.org/wiki/Dream_of_the_Red_Chamber)。

在这部小说中贾宝玉、林黛玉、薛宝钗是主要人物。这个数据集中定义了超过300个实体，其中包括书中的人物，地点和时间，以及超过500个这些实体之间的连接。

nickel2008@github 提供了数据集。此数据集中或有纰漏，但是对于一个图数据项目的示例来说已经足够好了。

WorldCup2014.json

下边的屏幕截图展示了在GraphNavigator中，WorldCup2014.json是如何渲染的。

应用(Applications)

图导航器(GraphNavigator)

图浏览器(GraphExplorer)

关系查找器(RelFinder)

贡献(Contributing to InteractiveGraph)

真诚地感谢您为InteractiveGraph提交的任何代码及文档。如果您有好的想法和创意，请fork本项目，并创建pull请求。

若要贡献新的应用，您可以定义BaseApp的新衍生类。

若要贡献任何控价，您可以定义UIControl和BGControl的衍生控件类。

欢迎贡献新的主题。

若要贡献新的工具按钮，您可以定义新的ButtonInfos.请注意，在按钮图标中可以找到Font Awesome的图标。

若要贡献新的数据集或对数据集的修改，您可以以GSON格式提交！

证书(LICENSE)

InteractiveGraph 使用 BSD 2-Clause "Simplified"证书。

最后，非常感谢您在项目中使用InteractiveGraph，为了更好地改进，我们真诚地想获取您的意见及使用情况，请将您的github用户名，您所在的组织和您的项目填写在下边的使用情况表中，非常感谢！

感谢您关注本项目，欢迎点赞⬆︎