Skip to content

Latest commit

 

History

History
234 lines (163 loc) · 11.4 KB

README_CN.md

File metadata and controls

234 lines (163 loc) · 11.4 KB

最新版本&详细说明参见https://github.com/grapheco/InteractiveGraph

InteractiveGraph

GitHub releases GitHub downloads GitHub issues GitHub forks GitHub stars GitHub license

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

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

图导航器(GraphNavigator): 在线试用 https://grapheco.github.io/InteractiveGraph/dist/examples/example1.html GraphNavigator

图浏览器(GraphExplorer): 在线试用 https://grapheco.github.io/InteractiveGraph/dist/examples/example2.html GraphExplorer

关系查找器(RelFinder): 在线试用 https://grapheco.github.io/InteractiveGraph/dist/examples/example3.html RelFinder

快速开始(Quick Start)

Step 1. 下载 examples.zip，链接如下: https://github.com/grapheco/InteractiveGraph/releases

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

Step 3. 在浏览器中打开示例，url如下： https://localhost:8080/examples/example1.html

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

使用方法(How to use)

Step 1. 下载 interactive-graph-<VERSION>.zip(如interactive-graph-0.1.0.zip) : https://github.com/grapheco/InteractiveGraph/dist/

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

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

<script type="text/javascript" src="./lib/interactive-graph-0.1.0/interactive-graph.min.js"></script>
<link type="text/css" rel="stylesheet" href="./lib/interactive-graph-0.1.0/interactive-graph.min.css">

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

<script type="text/javascript">
    igraph.i18n.setLanguage("chs");
    var app = new igraph.GraphNavigator(document.getElementById('graphArea'));
    app.loadGson("honglou.json");
</script>

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

更多详细信息, 请参见 https://github.com/grapheco/InteractiveGraph/blob/master/dist/examples/example1.html.

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

参考手册(Reference manual)

接口(InteractiveGraph API)

InteractiveGraph是用TypeScript实现的，如果需要获取在线API文档，请参见： https://grapheco.github.io/InteractiveGraph/dist/api/index.html

项目依赖(dependencies)

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

关于项目依赖的详情,请参见 https://github.com/grapheco/InteractiveGraph/blob/master/package.json.

主框架及应用(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 = "<p align=center>";
          description += "<img src='" + node.image + "' width=150/><br>";
        description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
        description += "</p>";
        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

World Cup 2014数据集来自http://visjs.org/examples/network/exampleApplications/worldCupPerformance.html. 其中边较多，因此绘制时对算力要求较高。

下边的屏幕截图展示了在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用户名，您所在的组织和您的项目填写在下边的使用情况表中，非常感谢！

https://github.com/grapheco/InteractiveGraph/wiki/use-case-collection

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