orgchart 5.0.0 → 7.0.0

package/README.zh-cn.md

@@ -1,4 +1,4 @@
-![OrgChart](http://dabeng.github.io/OrgChart/img/heading.svg)
+![OrgChart](http://dabeng.github.io/OrgChart/img/cover.png)
 
 # Read this in other languages: [繁體中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md), [English](https://github.com/dabeng/OrgChart/blob/master/README.md)
 
@@ -11,6 +11,9 @@
 ## 写在前面的话
 感谢[wesnolte](https://github.com/wesnolte)的非常棒的作品-- [jOrgChart](https://github.com/wesnolte/jOrgChart)。用嵌套的table来构造树状结构，用td的border来构造节点间的连线，非常有创意。天然地降低了前端程序员在构造树状结构时的工作量和难度，要知道，利用D3.js中的脑图去达到同样效果，开发周期就会长好多。哪怕你对svg，canvas等高级的制图API了然于胸，当你的树状结构图激发出HR大姐的各种天马行空的需求时，你会坦诚的承认svg或canvas这种重型武器拖累了你的快速解决一小戳敌人的能力。相比较而言，用单纯的**HTML5 + CSS3**的解决方案就像是 **“小米 + 步枪”的轻步兵**，天然地降低了你在实现树状结构图的难度，同时给予你更大的定制空间去面对基于这个结构图衍生出的种种琐碎需求。只要你的需求足够多，基于这个树状结构图，打造出一个完备的HR系统，也是可以期待的。实际上，网络上很多OrgChart商业软件就是围绕着一个树状结构核心模型展开的业务逻辑实现。
 
+- 自 5.0 版本起，用户可以构建家谱树。
+- 自 6.0 版本起，OrgChart 组件已回归原生实现，不再依赖 jQuery。
+
 ## 功能特性
 - 支持本地和远程的数据源。
 - 用户可以展开/折叠节点或子树，方便地浏览局部的结构图。
@@ -40,13 +43,19 @@ $ bower install orgchart
 # From version 1.0.4 on, users can install orgchart with npm
 $ npm install orgchart
 ```
-`require('orgchart')`会把orgchart插件追加到jQuery对象上。orgchart模块本身并不导出任何东西。
+在 CommonJS 环境中，`require('orgchart')`会直接导出 `OrgChart` 构造函数。
+
+可参考这个例子, [在React中使用jQuery Orchart](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)
 
 ## [gihtub pages实例集合](https://dabeng.github.io/OrgChart/)
 ## [基于嵌套ul的实例集合](https://codepen.io/collection/nWqvzY)
 ## [基于嵌套table的实例集合](https://codepen.io/collection/AWxGVb/) (过时)
 
 ### 天马行空的需求
+- [我想在500毫秒内渲染10,000个节点](https://dabeng.github.io/OrgChart/10000-nodes.html)
+
+![10000-nodes](http://dabeng.github.io/OrgChart/img/10000-nodes.png)
+
 - [ul数据源](https://dabeng.github.io/OrgChart/ul-datasource.html)(感谢 [Tobyee的好点子 :blush:](https://github.com/dabeng/OrgChart/issues/1))
 
 - [本地数据源](https://dabeng.github.io/OrgChart/local-datasource.html)
@@ -109,6 +118,8 @@ $ npm install orgchart
 
 这个特性的灵感来源于这两个话题的讨论--[Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)。感谢[mfahadi](https://github.com/mfahadi)和[Destructrix](https://github.com/Destructrix)建设性的讨论:blush:尤其感谢[tedliang](https://github.com/tedliang)提供了非常棒的混合布局的解决方案。
 
+与 `compact` 同时配置时，`verticalLevel` 从指定层级开始决定布局方式。方向、层级限制和拖放仍按照真实的父子关系处理。
+
 - [我想在组织结构图初始化时，就默认折叠掉若干节点（不限时这些节点的子节点）](https://dabeng.github.io/OrgChart/default-collapsed.html)
 
 这个好办。在数据源中，给父节点追加`'collapsed': true`，给子节点追加`'className': 'slide-up'`。
@@ -147,6 +158,10 @@ $ npm install orgchart
 
 **compact data property** 就派上用场了. 在数据源的某个节点里提供了"compact"属性，并赋为真值，那么它和它的子节点就会展示为压缩模式。
 
+紧凑布局可以与 `draggable`、`visibleLevel`、方向、平移、缩放和小地图同时使用。`compact: true` 会将所有分支设为紧凑布局，也可以通过回调选择子节点较多的分支。`drag` 是 `draggable` 的别名，同时提供两者时以 `draggable` 为准。紧凑布局中的拖放和节点编辑可能重建图表，操作后应重新查询已渲染的节点元素。
+
+家谱分组数据中的每个成员都使用配置的 `nodeId`，层级与 JSON、UL 数据一样从第 1 层起算。紧凑家谱的子节点按家庭分组排列成网格。拖放和编辑只修改选中成员及其后代，不会误移动整个家庭；家谱修改可能重建节点元素。`getHierarchy()` 会保留家谱分组数组，关联节点查询包含同一图表父级下的全部成员。
+
 - [我想构造族谱，家谱，宗谱的关系图](https://dabeng.github.io/OrgChart/family-tree.html)
 
 ![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
@@ -156,32 +171,32 @@ $ npm install orgchart
 ```
 var datascource = [
   [
-    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather' },
     { 
-      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'outsider': true,
       'children': [
         [
-          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt' }
         ],
         [
-          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother',
             'children': [
               [
               
-                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'outsider': true,
                   'children': [
-                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
-                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter' }],
                   ]
                 },
-                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me' },
               ]
             ]
           },
-          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'outsider': true }
         ],
         [
-          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt' }
         ]
       ]
     }
@@ -189,6 +204,16 @@ var datascource = [
 ];
 ```
 
+- [我想往族谱里追加一些自定义的标识](https://dabeng.github.io/OrgChart/familytree-custom-properties.html)
+
+![familytree-custom-properties](http://dabeng.github.io/OrgChart/img/familytree-custom-properties.png)
+
+- [我想通过小地图导航组织结构图](https://dabeng.github.io/OrgChart/minimap.html)
+
+![minimap](http://dabeng.github.io/OrgChart/img/minimap.png)
+
+启用 `minimap` 选项即可显示概览导航器。拖动其中的视口可以移动组织结构图，在小地图上滚动鼠标滚轮可以缩放。
+
 ### 本地运行orgchart
 
 - 必须安装node.js v6+，因为我们的单元测试是基于jsdom v11。
@@ -202,7 +227,10 @@ var datascource = [
 
 ### 实例化组织结构图
 ```js
-var oc = $('#chartContainerId').orgchart(options);
+var oc = new OrgChart({
+  chartContainer: '#chartContainerId',
+  data: datasource
+});
 ```
 
 ### 数据源示例
@@ -215,28 +243,25 @@ var oc = $('#chartContainerId').orgchart(options);
   // 来检索数据源，然后渲染默认结构样式的节点的上半部分
   'nodeContent': 'title', // 可选属性。插件会以该属性的值为属性，
   // 来检索数据源，然后渲染默认结构样式的节点的下半部分
-  'relationship': relationshipValue, // 注意：当你激活按需载入节点特性时
-  // 你应该使用JSON数据源（不论本地或远程）并设置本属性
-  // 本属性标识当前节点是否具有父节点，兄弟节点，子节点
-  // relationshipValue的值是由“0”或“1”组成的长度为3的字符串
-  // 第1个字符代表当前节点是否具有父节点
-  // 第2个字符代表当前节点是否具有兄弟节点
-  // 第三个字符代表当前节点是否具有孩子节点
   'children': [ // The property stands for nested nodes.
-    { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': '110' },
-    { 'name': 'Su Miao', 'title': 'department manager', 'relationship': '111',
+    { 'name': 'Bo Miao', 'title': 'department manager' },
+    { 'name': 'Su Miao', 'title': 'department manager',
       'children': [
-        { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },
-        { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '110' }
+        { 'name': 'Tie Hua', 'title': 'senior engineer' },
+        { 'name': 'Hei Hei', 'title': 'senior engineer' }
       ]
     },
-    { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': '110' }
+    { 'name': 'Yu Jie', 'title': 'department manager' }
   ],
   'otherPro': anyValue // 数据源中可以追加任意其他字段，只要你觉得
   // 在之后的渲染和操作组织结构图时派得上用场
 };
 ```
 
+节点关系直接依据当前已加载的结构判断。展开折叠和紧凑布局切换按钮在节点悬浮、聚焦或触屏选中时才创建，交互结束后回收；参与加载的按钮保留至加载完成。键盘用户可以聚焦节点，再用 Enter 或空格激活按钮。
+
+`createNode` 回调执行时没有预建的交互按钮，请通过 `icons` 定制图标，不要查询初始化时的箭头元素。按需加载由 demo 或业务层通过 `createNode` 创建独立请求按钮，并使用事件委托处理请求；请求按钮应使用与内置控件不同的行为选择器。加载后调用 `addAncestors()`、`addChildren()` 或 `addDescendants()` 加入真实节点，不需要关系元数据或新的加载回调选项。`getNodeState()` 只描述已加载的关系，不推断服务端尚未加载的数据。旧的关系属性和关系预处理方法不再支持。
+
 ### 选项
 <table>
   <thead>
@@ -251,10 +276,10 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>data</td>
-      <td>json / jquery object</td>
+      <td>object / array / HTMLUListElement</td>
       <td>是</td>
       <td></td>
-      <td>用于构造组织结构图的数据源。它的值可以是JSON或能提供数据的ul元素。</td>
+      <td>数据源可以是 JSON 树对象、家谱分组数组或 HTML ul 元素。UL 数据会在内部规范化，后续修改选项时仍会保留编辑结果。</td>
     </tr>
     <tr>
       <td>pan</td>
@@ -270,19 +295,26 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>false</td>
       <td>启动本选项，用户可以通过鼠标滚轮或触摸板对组织结构图进行缩放。</td>
     </tr>
+    <tr>
+      <td>minimap</td>
+      <td>boolean</td>
+      <td>否</td>
+      <td>false</td>
+      <td>显示小地图导航。拖动视口框可移动图表，在小地图上使用滚轮可缩放；即使 zoom 为 false，小地图自身的滚轮缩放仍然可用。</td>
+    </tr>
     <tr>
       <td>zoominLimit</td>
       <td>number</td>
       <td>否</td>
       <td>7</td>
-      <td>放大的上限值</td>
+      <td>包含边界的最大缩放比例。缩放步长会限制到此边界。上下限必须为有限正数，且下限不能大于上限。</td>
     </tr>
     <tr>
       <td>zoomoutLimit</td>
       <td>number</td>
       <td>否</td>
       <td>0.5</td>
-      <td>缩小的下限值</td>
+      <td>包含边界的最小缩放比例，不能大于 zoominLimit。无效的上下限会在替换图表前抛出 RangeError。</td>
     </tr>
     <tr>
       <td>direction</td>
@@ -307,10 +339,10 @@ var oc = $('#chartContainerId').orgchart(options);
     </tr>
     <tr>
       <td>visibleLevel</td>
-      <td>positive integer</td>
+      <td>非负整数或布尔值</td>
       <td>否</td>
       <td>999</td>
-      <td>该选项为用户指定初始化组织结构图时，可见的展开的层级是多少</td>
+      <td>指定初始展开深度。true 使用默认深度（999）；false 只显示第一层；0 隐藏所有初始节点。更深的分支可以随后展开。</td>
     </tr>
     <tr>
       <td>nodeTitle</td>
@@ -319,13 +351,6 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>"name"</td>
       <td>将默认节点结构中的标题部分关联到数据源中的一个属性</td>
     </tr>
-    <tr>
-      <td>parentNodeSymbol</td>
-      <td>string</td>
-      <td>否</td>
-      <td>"oci-leader"</td>
-      <td>为所有父节点的icon标识指定CSS类名</td>
-    </tr>
     <tr>
       <td>nodeContent</td>
       <td>string</td>
@@ -352,7 +377,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>否</td>
       <td></td>
-      <td>为该选项提供的函数，会在默认节点结构创建完毕后调用。利用传入的两个参数--"$node"和"data"，可以帮助开发者定制或改动现有的节点结构。</td>
+      <td>为该选项提供的函数，会在默认节点结构创建完毕后调用。利用传入的两个参数--"node"和"data"，可以帮助开发者定制或改动现有的节点结构。</td>
     </tr>
     <tr>
       <td>exportButton</td>
@@ -372,7 +397,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>exportFilename</td>
       <td>string</td>
       <td>否</td>
-      <td>"Orgchart"</td>
+      <td>"OrgChart"</td>
       <td>导出文件的文件名。</td>
     </tr>
     <tr>
@@ -382,6 +407,13 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>"png"</td>
       <td>导出文件的扩展名。</td>
     </tr>
+    <tr>
+      <td>exportScale</td>
+      <td>number</td>
+      <td>否</td>
+      <td>2</td>
+      <td>导出画布的分辨率倍数，PNG 和 PDF 均适用；PDF 页面保留图表的逻辑尺寸。非正数会回退为 1。</td>
+    </tr>
     <tr>
       <td>chartClass</td>
       <td>string</td>
@@ -408,20 +440,83 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>否</td>
       <td></td>
-      <td>组织结构图初始化完成后，该选项指定的回调函数被触发。该函数接受一个参数--"$chart", 即初始化后的组织结构图jquery对象。</td>
+      <td>组织结构图初始化完成后，该选项指定的回调函数被触发。该函数接受一个参数--"chart", 即初始化后的组织结构图元素。</td>
+    </tr>
+    <tr>
+      <td>icons</td>
+      <td>json</td>
+      <td>否</td>
+      <td></td>
+      <td>自定义图标的 CSS 类名。部分图标对象会逐字段与默认值合并，父节点图标使用 icons.parentNode 设置。
+        <pre>
+          <code>
+'icons': {
+  'theme': 'fa-solid fa-sm',
+  'parentNode': 'fa-user-tie',
+  'expandToUp': 'fa-angles-up',
+  'collapseToDown': 'fa-angles-down',
+  'collapseToLeft': 'fa-angles-left',
+  'expandToRight': 'fa-angles-right',
+  'collapsed': 'fa-circle-plus',
+  'expanded': 'fa-circle-minus'
+}
+          </code>
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>compact</td>
+      <td>布尔值或函数</td>
+      <td>否</td>
+      <td></td>
+      <td>true 会将所有分支设为紧凑布局；接收节点数据的回调可选择额外的紧凑分支。节点数据中显式设置的 compact 属性会保留。在适用的节点上，垂直或混合布局优先。</td>
     </tr>
   </tbody>
 </table>
 
 ### 方法
-我们相信当你研究了[edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/)这个Demo后，会基本掌握orgchart插件的所有方法。
+使用 `new OrgChart(options)` 创建实例。`chartContainer` 和 `chart` 属性分别提供原生容器元素与已渲染的组织结构图元素。
 
-#### var oc = $container.orgchart(options)
-在指定容器元素内嵌入一个组织结构图。该方法接受的options参数的细节可以到上面的“选项”一节中查看。这里的oc是OrgChart类的实例。
+```js
+const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource });
+```
+
+公开 API 包括：`init`、`setOptions`、`attachMinimap`、`detachMinimap`、`updateMinimap`、`addAncestors`、`addDescendants`、`addParent`、`addSiblings`、`addChildren`、`removeNodes`、`getHierarchy`、`getNodeState`、`getParent`、`getChildren`、`getSiblings`、`getRelatedNodes`、`hideParent`、`showParent`、`hideChildren`、`showChildren`、`hideSiblings`、`showSiblings`、`setChartScale`、`export`、`exportPNG` 和 `exportPDF`。其中节点和图表参数均为原生 `HTMLElement`。
+
+#### API 参考
+| 调用 | 参数 | 返回值与调用行为 |
+| --- | --- | --- |
+| `oc.init(options)` | 部分选项对象；传入 `data` 可替换数据源。 | 重新构建图表并返回 `oc`。 |
+| `oc.setOptions(options)`<br>`oc.setOptions(name, value)` | 部分选项对象，或选项名称及对应值。 | 原地更新导航与导出设置；数据、布局或节点渲染设置会重建图表；返回 `oc`。 |
+| `oc.attachMinimap()`<br>`oc.detachMinimap()`<br>`oc.updateMinimap(forceRefresh)` | `forceRefresh` 可选；传入 `true` 会重绘节点预览。 | 创建、移除或刷新小地图。常规启用应使用 `setOptions('minimap', value)`。 |
+| `oc.addAncestors(data, parentId)` | 祖先数据，以及接收原根节点的祖先节点 id。 | 插入祖先层级；无返回值。 |
+| `oc.addDescendants(data, parent)` | 后代数据数组和已渲染的父 `.node`。 | 追加后代层级；无返回值。 |
+| `oc.addParent(currentRoot, data)` | 已渲染的根 `.node` 和新父节点数据。 | 用新父节点包裹当前根；无返回值。 |
+| `oc.addSiblings(node, data)`<br>`oc.addChildren(node, data)` | 已渲染的 `.node` 和兄弟节点或子节点数据数组。 | 增加渲染节点；无返回值。 |
+| `oc.removeNodes(node)` | 要删除的已渲染 `.node`。 | 删除该节点及其后代；无返回值。 |
+| `oc.getHierarchy(includeNodeData)` | 可选布尔值，默认 `false`。 | 树数据返回层级对象，家谱数据返回分组数组；图表或必要节点 id 不可用时返回错误字符串。 |
+| `oc.getNodeState(node, relation)` | 已渲染 `.node`；`relation` 为 `parent`、`children` 或 `siblings`。 | 返回 `{ exist, visible }`。 |
+| `oc.getParent(node)` | 已渲染 `.node`。 | 返回父 `.node`，不存在时返回 `null`。 |
+| `oc.getChildren(node)`<br>`oc.getSiblings(node)` | 已渲染 `.node`。 | 返回直接子节点或兄弟节点 `.node` 元素数组。 |
+| `oc.getRelatedNodes(node, relation)` | 已渲染 `.node`；`relation` 为 `parent`、`children` 或 `siblings`。 | 通用关联查询；parent 返回节点或 `null`，其他关系返回数组。 |
+| `oc.hideParent(node)` / `oc.showParent(node)`<br>`oc.hideChildren(node)` / `oc.showChildren(node)` | 已渲染 `.node`。 | 通过图表过渡隐藏或显示关联分支；无返回值。 |
+| `oc.hideSiblings(node, direction)`<br>`oc.showSiblings(node, direction)` | 已渲染 `.node`；可选 `direction` 为 `left` 或 `right`。 | 隐藏或显示指定一侧的兄弟节点；省略方向时处理全部兄弟节点；无返回值。 |
+| `oc.setChartScale(chart, multiplier, zoomAnchor)` | 通常传入 `oc.chart`；正数的相对缩放倍数；可选视口坐标 `{ x, y }`。 | 在配置的缩放范围内缩放，提供 `zoomAnchor` 时固定该点。 |
+| `oc.export(filename, extension)` | 可选文件名和 `png` 或 `pdf` 扩展名。 | 按配置默认值开始导出；无法导出时返回 `false`。 |
+| `oc.exportPNG(canvas, filename)`<br>`oc.exportPDF(canvas, filename, exportScale)` | 已准备的 canvas、文件名；PDF 缩放默认 `1`。 | 将传入 canvas 直接下载为 PNG 或 PDF；通常应调用 `export()`。 |
 
 #### init(newOptions)
 当你想基于新的options或数据源刷新组织结构图时，这个方法就派上用场了。
 
+#### setOptions(options) / setOptions(name, value)
+无需重新构建图表即可更新 `pan`、`zoom`、`minimap`、缩放上下限，以及导出的分辨率倍数、文件名和扩展名。其他选项会重建图表。可传入部分选项对象，或选项名称及对应值。后续 `init()` 调用会保留这些变更，图标默认值逐字段合并。重建后应重新查询节点元素。
+
+#### attachMinimap() / detachMinimap()
+创建或移除当前图表的小地图覆盖层。通常应使用 `setOptions('minimap', true|false)`，以保证选项状态和覆盖层保持同步。
+
+#### updateMinimap(forceRefresh)
+在修改图表变换或布局后重新计算小地图视口。传入 `true` 会重绘小地图中的节点预览。
+
 #### addAncestors(data, parentId)
 为当前的组织结构图增加祖先节点，可以不止一个层级。
 <table>
@@ -452,7 +547,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addDescendants(data, $parent)
+#### addDescendants(data, parent)
 为指定的父节点增加后代节点。
 <table>
   <thead>
@@ -473,8 +568,8 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>用于构造后代节点的数据源</td>
     </tr>
     <tr>
-      <td>$parent</td>
-      <td>jquery object</td>
+      <td>parent</td>
+      <td>HTMLElement</td>
       <td>yes</td>
       <td></td>
       <td>后代节点要追加到的父节点对象</td>
@@ -482,7 +577,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addParent(data)
+#### addParent(currentRoot, data)
 为当前的组织结构图增加父节点。
 <table>
   <thead>
@@ -495,6 +590,13 @@ var oc = $('#chartContainerId').orgchart(options);
     </tr>
   </thead>
   <tbody>
+    <tr>
+      <td>currentRoot</td>
+      <td>HTMLElement</td>
+      <td>是</td>
+      <td></td>
+      <td>当前组织结构图的根节点，新父节点会包裹这个根节点</td>
+    </tr>
     <tr>
       <td>data</td>
       <td>json object</td>
@@ -505,7 +607,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addSiblings($node, data)
+#### addSiblings(node, data)
 为指定的节点增加兄弟节点。
 <table>
   <thead>
@@ -519,8 +621,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>基于该节点增加其兄弟节点</td>
@@ -535,7 +637,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addChildren($node, data)
+#### addChildren(node, data)
 为指定的节点增加孩子节点。
 <table>
   <thead>
@@ -549,8 +651,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>基于该节点增加其孩子节点</td>
@@ -565,7 +667,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### removeNodes($node）
+#### removeNodes(node)
 删除指定的节点及其后代节点。
 <table>
   <thead>
@@ -579,8 +681,8 @@ var oc = $('#chartContainerId').orgchart(options);
   </thead>
   <tbody>
     <tr>
-      <td>$node</td>
-      <td>jquery object</td>
+      <td>node</td>
+      <td>HTMLElement</td>
       <td>是</td>
       <td></td>
       <td>待删除的节点。</td>
@@ -608,7 +710,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### hideParent($node)
+#### hideParent(node)
 隐藏指定节点的父节点。当然其兄弟节点及祖先节点也一并隐藏了。
 <table>
   <tr>
@@ -619,15 +721,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>Yes</td>
     <td>None</td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
 </table>
 
-#### showParent($node)
+#### showParent(node)
 显示指定节点的父节点。但不包括更上一层的祖先节点。
 
 <table>
@@ -639,15 +741,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
 </table>
 
-#### hideChildren($node)
+#### hideChildren(node)
 隐藏指定节点的孩子节点。当然这其中包含了所有的后代节点。
 
 <table>
@@ -659,15 +761,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
 </table>
 
-#### showChildren($node)
+#### showChildren(node)
 显示指定节点的孩子节点。默认只显示紧邻的下一个层级，并不包括所有的后代节点。
 
 <table>
@@ -679,15 +781,15 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
 </table>
 
-#### hideSiblings($node, direction)
+#### hideSiblings(node, direction)
 隐藏指定节点的兄弟节点。
 
 <table>
@@ -699,11 +801,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -714,7 +816,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### showSiblings($node, direction)
+#### showSiblings(node, direction)
 显示指定节点的兄弟节点。
 
 <table>
@@ -726,11 +828,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>It's the desired JQuery Object to show its siblings nodes</td>
+    <td>指定节点元素。</td>
   </tr>
   <tr>
     <td>direction</td>
@@ -741,7 +843,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### getNodeState($node, relation)
+#### getNodeState(node, relation)
 该方法帮你了解指定节点的相关节点的显示状况。
 
 <table>
@@ -753,11 +855,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -775,7 +877,7 @@ var oc = $('#chartContainerId').orgchart(options);
   "visible":true|false, // 标识相关节点当前是否可见
 }
 ```
-#### getRelatedNodes($node, relation)
+#### getRelatedNodes(node, relation)
 获得指定节点的关联节点。
 
 <table>
@@ -787,11 +889,11 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$node</td>
-    <td>JQuery Object</td>
+    <td>node</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td></td>
-    <td>指定节点的jquery对象。</td>
+    <td>指定节点元素。</td>
   </tr>
   <tr>
     <td>relation</td>
@@ -802,9 +904,20 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### setChartScale($chart, newScale)
+#### getParent(node)
+返回指定节点的父节点；如果不存在父节点，则返回 `null`。
+
+#### getChildren(node)
+返回指定节点的直接子节点数组。返回值中的每一项都是原生 `HTMLElement`。
+
+#### getSiblings(node)
+返回指定节点的兄弟节点数组。返回值中的每一项都是原生 `HTMLElement`。
+
+#### setChartScale(chart, newScale, zoomAnchor)
 用这个方法可以帮你为指定的组织结构图设置新的scale系数。
 
+`zoomAnchor` 为可选参数，格式为视口坐标 `{ x, y }`。提供该参数后，缩放时会固定该坐标点。
+
 <table>
   <tr>
     <th>名称</th>
@@ -814,8 +927,8 @@ var oc = $('#chartContainerId').orgchart(options);
     <th>描述</th>
   </tr>
   <tr>
-    <td>$chart</td>
-    <td>JQuery Object</td>
+    <td>chart</td>
+    <td>HTMLElement</td>
     <td>是</td>
     <td>None</td>
     <td>组织结构图容器中的某一个图。</td>
@@ -856,8 +969,22 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
+#### exportPNG(canvas, exportFilename)
+将准备好的 canvas 导出为 PNG 下载。当应用自行提供 canvas 时可直接调用；大多数场景应使用 `export()`。
+
+#### exportPDF(canvas, exportFilename, exportScale)
+将准备好的 canvas 导出为 PDF 下载。`exportScale` 是 canvas 的渲染缩放比例，用于保持 PDF 的逻辑尺寸；大多数场景应使用 `export()`。
+
 ### 事件
 
+OrgChart 会派发可冒泡的原生 `CustomEvent`。请使用 `addEventListener` 订阅，事件参数位于 `event.detail`。
+
+```js
+oc.chart.addEventListener('nodedrop.orgchart', function (event) {
+  const { draggedNode, dragZone, dropZone } = event.detail;
+});
+```
+
 <table>
   <thead>
     <tr>
@@ -869,23 +996,28 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>nodedrop.orgchart</td>
-      <td>draggedNode, dragZone, dropZone</td>
-      <td>当你拖拽一个节点，然后在目前区域松放时，该事件被触发。请参考实例 <a target="_blank" href="http://dabeng.github.io/OrgChart/drag-drop/">example drag & drop</a>。</td>
+      <td><code>event.detail</code>: draggedNode, dragZone, dropZone</td>
+      <td>在节点移动前于图表元素上触发。调用 <code>event.preventDefault()</code> 可取消本次拖放。</td>
+    </tr>
+    <tr>
+      <td>otherdropped.orgchart</td>
+      <td><code>event.detail</code>: draggedItem, dropZone</td>
+      <td>非 OrgChart 的可拖放项被放到节点上时，于图表元素上触发。</td>
     </tr>
     <tr>
       <td>init.orgchart</td>
-      <td>chart</td>
-      <td>当组织结构图初始化完成时，该事件触发。在响应事件处理器中，你可以访问到渲染出的任意节点。</td>
+      <td>无；<code>event.target</code> 为图表元素</td>
+      <td>图表渲染完成后触发。</td>
     </tr>
     <tr>
       <td>show-[relation].orgchart</td>
       <td></td>
-      <td>在显示指定节点的关联节点时，触发该事件。</td>
+      <td>关联节点显示时在该节点上触发；<code>relation</code> 为 parent、children 或 siblings。</td>
     </tr>
     <tr>
       <td>hide-[relation].orgchart</td>
       <td></td>
-      <td>在隐藏指定节点的关联节点时，触发该事件。</td>
+      <td>关联节点隐藏时在该节点上触发；<code>relation</code> 为 parent、children 或 siblings。</td>
     </tr>
   </tbody>
 </table>
@@ -896,9 +1028,9 @@ var oc = $('#chartContainerId').orgchart(options);
 
 我们提供了一个CSS类"noncollapsable"，可以方便地完成这件事。
 ```js
-$('.orgchart').addClass('noncollapsable'); // 禁掉展开/折叠
+oc.chart.classList.add('noncollapsable'); // 禁掉展开/折叠
 
-$('.orgchart').removeClass('noncollapsable'); // 开启展开/折叠
+oc.chart.classList.remove('noncollapsable'); // 开启展开/折叠
 ```
 
 #### 为啥根节点消失了，看不到了？