.zip`, 将得到两个文件: `interactive-graph.min.js` 和 `interactive-graph.min.css`.
__Step 3.__ 在HTML中引入 `.js` 和 `.css` 文件,比如:
```javascript
```
__Step 4.__ 使用在 `igraph` 中定义的函数和类:
```javascript
```
按上述步骤操作,将会使用`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` 由一些数据项组成,其定义如下:
```typescript
export interface GSON {
"data": {
nodes: object[];
edges?: object[];
}
"dbinfo"?: object;
"categories"?: object;
"translator"?: {
"nodes"?: (node: object) => void;
"edges"?: (node: object) => void;
};
}
```
此处,`translator`是对于图中节点和边的翻译函数的定义,框架加载数据时会调用这个函数。示例如下,在这个例子中,在加载时为每个节点的`description`赋值。
```javascript
"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
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
感谢您关注本项目,欢迎点赞⬆︎