2019.11-2020.03 开发计划

官网升级

  • 文档迁移；
  • Demo迁移：
    • 图元素：（8 种节点 + 5 种边）* 3
    • 自定义：13
      • 图元素：7 个节点 + 3 条边；
      • 箭头：3 种
    • 布局：7 * 3，每种布局配三个不同配置的 Demo；
    • 交互：6个；
    • 节点分组：2+；
    • 动画：3；
    • 复杂 case：5。

      图算法

      确定 G6 中图算法的具体方案，能力上对其Cytoscape中的算法部分。

image.png

定义Shape

自定义节点和边时考虑支持使用类似 JSON Schema 的 DSL 来定义。

功能优化

  • state 机制改造；
  • 节点分组改造。

工程化升级

  • 升级底层渲染引擎至 G4.0；
  • 使用 TS 重构。

2019.10-2019.11 开发计划

优化及封装交互

  • done默认提供的 Behavior 支持交互方式配置；
  • done拖动画布与框选互斥；
  • done框选默认使用shift+拖动的方式，支持用户配置，可配置Ctrl、Alt、Shift及drag，drag表示直接拖动；
  • done拖动节点时 delegate 可选，用户可以通过enableDelegate参数配置是否启用delegate；
  • done选中节点时，支持用户配置多选方式，如通过按住shift、Ctrl、Alt等键多选，参数直接使用字符串；
  • done高亮相邻节点时，如果有选中的节点，则默认不处理选中状态，用户可以通过配置项配置；
  • 梳理真正有用的Behavior，像Tooltip这种是否应该放Behavior中？
  • modes是否应该默认就提供以下Behavior：drag-node、drag-canvas等最常用的交互；

节点拖动、框选和选中之间的关系：

  • 节点拖动完不应该触发选中；
  • 节点框选交互不应该与拖动画布和拖动节点冲突；
  • 拖动节点支持配置是否启用delegate。

节点分组

  • done节点分组支持自定义标题；
  • 收起分组后支持配置是否显示标题，收起时，如果有标题则显示；
  • 性能优化。

节点优化

内置节点的 linkPoints 与 anchorPoint 相关联，用户在使用时，只需要设置 linkPoints，自动添加对应的anchorPoints 。

布局完善及优化

  • 节点分组布局；

组件

主要包括与图分析相关的组件，如Minimap、Filter Data、Legend、Layout切换等。其中Filter Data及Legend具有数据过滤的功能，Legend为简单的过滤、Filter Data为复杂过滤。
Legend：只按节点类型过滤；
Filter Data：节点及边的类型、属性字段、指定值的范围等。

能力上面参考：https://cambridge-intelligence.com/filtering/

Demo

三个综合应用Demo。

丰富Demo

负责人 @十吾(shiwu-5wap2) @聚则(moyee-bzn) @长哲(changzhe) @山果(shanguo) @镜曦(jingxi-g5ldr)

时间点

9.30之前 35+，11.22之前 50+。

案例分类

  • 自定义Shape：
    • done自定义卡片节点；
    • done自定义pie节点；
    • done自定义折线；
    • 自定义箭头；
    • done自定义列表及列表详情的Shape；
    • done 共5个自定义chart节点；
  • 交互：
    • done点击替换节点图片；
    • 响应shape中某部分；
    • 右键菜单；
    • hover或select时，给节点添加背景效果；
  • 文本：
    • done文本太长换行；
    • done文本太长显示省略号；
    • shape宽度自动适应文本长度。
  • group：
    • done渲染单层及嵌套的group；
    • done拖动group；
    • done收起/展开group；
    • done拖动group中的节点到其他group。
  • 流程图：
    • done基于dagre的自定义流程图；
  • 关系图：
    • done边绑定；
    • done布局：10+；
  • 其他：
    • doneArc Diagram；
    • doneCicular Arc Diagram；
    • donedoneBubbles；
    • done树图边上显示label；
    • done树图点击没有children的节点时，动态请求数据添加到图中；
    • 设置边的层级，让边可以显示到节点上，该操作同时需要体现到文档中；
  • 复杂案例：
    • done American Migration Graph；
    • done Cluster Simplify Case；
    • done Beijing Metro Animation Graph；
    • donedone 资金流转图。

文档优化

负责人 @聚则(moyee-bzn) @十吾(shiwu-5wap2)；
G6文档计划包括教程、API文档及Demo三部分。

  • Tutorial 第一版已经完成，正在优化中；
  • 进阶教程：
    • 中阶教程；
    • 高阶教程；
  • API 写入到代码中（注释）。

问题

文档方面目前存在的问题，主要可以归结为以下三个：

  • 用户不知道用哪个图；
  • 不知道某个图有哪些API，找不到所需要的API及配置项；
  • 不知道具体的API怎么使用。

方案

G6的用户，一般期望按照以下流程使用文档：找Demo —-> 看源码 —-> 查API。

  • 找Demo：拿到视觉稿以后，根据视觉稿去找对应的Demo；
  • 找到类似的Demo后，查看源码，看该Demo是如何实现的；
  • 查看Demo源码中使用到的API的作用及使用方式。

所以 Demo 页面中透出相关教程链接？

G6的文档可以分为两大部分：语雀上的教程、类似 antd风格的Demo介绍+源码 和 API文档（涉及到的所有API链接）。

Demo

Demo介绍+源码，按Demo类别分类：

  • 树图；
  • 一般图（包括一般图各种布局用法）；
  • 其他表达形式（桑基图、弧线图、环形弧线图、气泡图等）；
  • 元素（内置边和节点、自定义边和节点、文本，各种样式）；
  • 交互（内置交互、自定义交互、状态相关）；
  • 动画；
  • 辅助工具（tooltip、minimap、grid、bundling、context menu）；
  • 复杂案例。

API

API文档，关键api提供具体的使用说明及可执行的demo源码，类似Demo介绍：

  • 全局API；
  • Graph；
  • Item；
  • TreeGraph；
  • Node；
  • Edge：
  • Behavior；
  • Event；
  • Shape

教程

G6教程目录结构如下：

  • G6 3.x 教程
    • 快速上手；
    • 20 minues Tutorial
    • 进阶教程
      • 中级教程
        • G6中的关键概念
          • KeyShape；
          • Mode；
          • Behavior；
          • Group：非节点分组的group。
        • 节点
          • 内置的节点；
          • 修改节点样式；
          • 修改节点文本样式；
        • 边
          • 内置的边；
          • 修改边的样式；
          • 修改边上文本的样式；
        • 交互
          • 内置交互；
          • Canvas 交互；
          • 节点的交互；
          • 边的交互；
        • 布局
      • 高级教程
        • 自定义节点；
        • 自定义边；
        • 自定义交互；
        • 自定义布局；
        • 动画（全局，边，节点）；
        • 节点分组；
        • 结合框架使用：
          • 如何在 React 中使用 G6；
          • 如何在 Vue 中使用 G6。

Layout

负责人 @十吾(shiwu-5wap2)；

时间点

11.22之前。

目标

  • 提供布局扩展机制：注册、复写；
  • 子图布局的管理；
  • 内置5+常见布局：
    • Force
    • Dagre
    • MDS
    • Fruchterman
    • Circular
    • Radial
    • ……

Group

负责人 @聚则(moyee-bzn)；

时间点

9月30日之前。

目标

能力对齐KeyLines的Combining And Grouping Nodes。

功能点

  • done渲染单层和嵌套Group；
  • done拖动Group：Group中的节点跟随拖动，父Group高亮；
  • doneGroup拖出父Group，进入到的Group高亮；
  • done节点拖出/拖入Group；
  • done节点拖动时父Group高亮；
  • done节点拖入到的Group高亮；
  • 双击收起/展开Group：支持配置交互方式；
  • 将拖出的Group拖进 到其他Group中。

单测

  • doneCustomGroupController中各个方法单测；
  • donedrag-group Behavior单测；
  • donecollapse-expand-group Behavior单测；
  • donedrag-node-with-group单测。

丰富内置节点

详细内容参考内置节点文档。
G6内置了以下节点类型：

  • donecircle；
  • donerect；
  • doneellipse；
  • donediamond；
  • donetriangle；
  • donemodelRect；
  • donestar。

丰富内置边

功能优化

  • done状态管理：select、hover及normal状态自动切换；
  • 数据中设置属性，支持节点不可拖动；优化为在Node中提供一个locked方法，通过调用node.locked()锁定该节点，不允许拖动；
  • 增加一个配置项，让边的label跟随边的颜色改变；
  • 可配置边的label旋转中心；

BugFix

  • doneTreeGraph快速点击可收起节点，JS报错；
  • 容器设置背景色后，网格线无法显示；
  • 点击不灵敏及有时无法触发drag事件；
  • doneTreeGraph收起后root节点显示到右上角：可通过fixedRoot配置项设置，具体参考配置文档；
  • drag-canvas和drag-node，可以一直drag，好像画布无穷大似的；
  • updateItem时，merge默认配置的属性值；
  • lightdark 颜色覆盖，没有使用用户指定的颜色，使用的是内置节点的默认颜色；