__图浏览器(GraphExplorer)__: 在线试用 https://grapheco.github.io/InteractiveGraph/dist/examples/example2.html
__关系查找器(RelFinder)__: 在线试用 https://grapheco.github.io/InteractiveGraph/dist/examples/example3.html
## 
关于项目依赖的详情,请参见 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 += "
## 应用(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
感谢您关注本项目，欢迎点赞⬆︎