orgchart 4.0.1 → 6.0.0

package/README.zh-cn.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,7 +43,9 @@ $ 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)
@@ -105,10 +110,6 @@ $ npm install orgchart
 
 我们只需要把css的样式与数据源中的id字段或css类字段关联起来就好。
 
-- [我想实现一个多层级（而非深度）的组织结构图](https://dabeng.github.io/OrgChart/multiple-layers.html)
-
-如果你的组织层级很多，二每个层级下的节点也很多，那么上面的方案可以采纳尝试。
-
 - [我想构造一个混合布局的（水平方向 + 垂直方向）组织结构图](https://dabeng.github.io/OrgChart/vertical-level.html)
 
 这个特性的灵感来源于这两个话题的讨论--[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)提供了非常棒的混合布局的解决方案。
@@ -125,6 +126,84 @@ $ npm install orgchart
 
 没问题，我们推荐使用ES6的模版字符串。
 
+- [我想将节点安置在特定的层级. 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
+
+![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
+
+你需要的是一个复合的解决方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
+
+- [我想构造一个组织结构图，每个节点宽度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
+
+![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
+
+- [我想在混合布局中实现拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
+
+- [我想指定从某一分支开始，其下所有子节点都以垂直样式显示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
+
+![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
+
+**hybrid data property** 就派上用场了. 在数据源的某个节点中提供"hybrid"属性，那么它的所有后代节点都会垂直布局.
+
+- [我想用Font Awesome图标代替内置的图标](https://dabeng.github.io/OrgChart/custom-icons.html)
+
+- [子节点众多的时候，我想以一种压缩起来的展示方式尽可能节省空间](https://dabeng.github.io/OrgChart/data-prop-compact.html)
+
+![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
+
+**compact data property** 就派上用场了. 在数据源的某个节点里提供了"compact"属性，并赋为真值，那么它和它的子节点就会展示为压缩模式。
+
+- [我想构造族谱，家谱，宗谱的关系图](https://dabeng.github.io/OrgChart/family-tree.html)
+
+![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
+
+我们使用如下的二维数组数据源来构建家谱。“outsider”代表外姓人。
+
+```
+var datascource = [
+  [
+    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather' },
+    { 
+      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'outsider': true,
+      'children': [
+        [
+          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt' }
+        ],
+        [
+          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother',
+            'children': [
+              [
+              
+                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'outsider': true,
+                  'children': [
+                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter' }],
+                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter' }],
+                  ]
+                },
+                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me' },
+              ]
+            ]
+          },
+          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'outsider': true }
+        ],
+        [
+          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt' }
+        ]
+      ]
+    }
+  ]
+];
+```
+
+- [我想往族谱里追加一些自定义的标识](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。
@@ -138,7 +217,10 @@ $ npm install orgchart
 
 ### 实例化组织结构图
 ```js
-var oc = $('#chartContainerId').orgchart(options);
+var oc = new OrgChart({
+  chartContainer: '#chartContainerId',
+  data: datasource
+});
 ```
 
 ### 数据源示例
@@ -187,7 +269,7 @@ var oc = $('#chartContainerId').orgchart(options);
   <tbody>
     <tr>
       <td>data</td>
-      <td>json / jquery object</td>
+      <td>json / HTMLUListElement</td>
       <td>是</td>
       <td></td>
       <td>用于构造组织结构图的数据源。它的值可以是JSON或能提供数据的ul元素。</td>
@@ -288,7 +370,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>
@@ -344,20 +426,54 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>function</td>
       <td>否</td>
       <td></td>
-      <td>组织结构图初始化完成后，该选项指定的回调函数被触发。该函数接受一个参数--"$chart", 即初始化后的组织结构图jquery对象。</td>
+      <td>组织结构图初始化完成后，该选项指定的回调函数被触发。该函数接受一个参数--"chart", 即初始化后的组织结构图元素。</td>
     </tr>
   </tbody>
 </table>
 
 ### 方法
-我们相信当你研究了[edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/)这个Demo后，会基本掌握orgchart插件的所有方法。
+使用 `new OrgChart(options)` 创建实例。`chartContainer` 和 `chart` 属性分别提供原生容器元素与已渲染的组织结构图元素。
+
+```js
+const oc = new OrgChart({ chartContainer: '#chartContainerId', data: datasource });
+```
 
-#### var oc = $container.orgchart(options)
-在指定容器元素内嵌入一个组织结构图。该方法接受的options参数的细节可以到上面的“选项”一节中查看。这里的oc是OrgChart类的实例。
+公开 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)` | 包含 `data`、`pan`、`zoom` 或 `minimap` 的对象；或受支持的选项名称及布尔值。 | `data` 会重建图表，其他选项切换相应功能；返回 `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`。可传入选项对象，或传入支持的选项名称和布尔值；传入包含 `data` 的对象时会重新构建图表。
+
+#### attachMinimap() / detachMinimap()
+创建或移除当前图表的小地图覆盖层。通常应使用 `setOptions('minimap', true|false)`，以保证选项状态和覆盖层保持同步。
+
+#### updateMinimap(forceRefresh)
+在修改图表变换或布局后重新计算小地图视口。传入 `true` 会重绘小地图中的节点预览。
+
 #### addAncestors(data, parentId)
 为当前的组织结构图增加祖先节点，可以不止一个层级。
 <table>
@@ -388,7 +504,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addDescendants(data, $parent)
+#### addDescendants(data, parent)
 为指定的父节点增加后代节点。
 <table>
   <thead>
@@ -409,8 +525,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>
@@ -418,7 +534,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addParent(data)
+#### addParent(currentRoot, data)
 为当前的组织结构图增加父节点。
 <table>
   <thead>
@@ -431,6 +547,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>
@@ -441,7 +564,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addSiblings($node, data)
+#### addSiblings(node, data)
 为指定的节点增加兄弟节点。
 <table>
   <thead>
@@ -455,8 +578,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>
@@ -471,7 +594,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### addChildren($node, data)
+#### addChildren(node, data)
 为指定的节点增加孩子节点。
 <table>
   <thead>
@@ -485,8 +608,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>
@@ -501,7 +624,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tbody>
 </table>
 
-#### removeNodes($node）
+#### removeNodes(node)
 删除指定的节点及其后代节点。
 <table>
   <thead>
@@ -515,8 +638,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>
@@ -544,7 +667,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### hideParent($node)
+#### hideParent(node)
 隐藏指定节点的父节点。当然其兄弟节点及祖先节点也一并隐藏了。
 <table>
   <tr>
@@ -555,15 +678,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>
@@ -575,15 +698,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>
@@ -595,15 +718,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>
@@ -615,15 +738,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>
@@ -635,11 +758,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>
@@ -650,7 +773,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### showSiblings($node, direction)
+#### showSiblings(node, direction)
 显示指定节点的兄弟节点。
 
 <table>
@@ -662,11 +785,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>
@@ -677,7 +800,7 @@ var oc = $('#chartContainerId').orgchart(options);
   </tr>
 </table>
 
-#### getNodeState($node, relation)
+#### getNodeState(node, relation)
 该方法帮你了解指定节点的相关节点的显示状况。
 
 <table>
@@ -689,11 +812,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>
@@ -711,7 +834,7 @@ var oc = $('#chartContainerId').orgchart(options);
   "visible":true|false, // 标识相关节点当前是否可见
 }
 ```
-#### getRelatedNodes($node, relation)
+#### getRelatedNodes(node, relation)
 获得指定节点的关联节点。
 
 <table>
@@ -723,11 +846,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>
@@ -738,9 +861,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>
@@ -750,8 +884,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>
@@ -792,8 +926,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>
@@ -805,23 +953,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>
@@ -832,9 +985,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'); // 开启展开/折叠
 ```
 
 #### 为啥根节点消失了，看不到了？