From e38a6ba8f341bf4eaad7509e5fe0287dd8df8894 Mon Sep 17 00:00:00 2001 From: dabeng Date: Sun, 15 Dec 2024 12:30:16 +0800 Subject: [PATCH] update doc --- README.md | 48 +++++++++++++++++----------------- README.zh-cn.md | 68 +++++++++++++++++++++++++++++++++++++++++++++++++ README.zh-tw.md | 68 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 160 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index ad928c4..c32f1f0 100644 --- a/README.md +++ b/README.md @@ -171,39 +171,39 @@ You need the solution based on new datasource structure with **levelOffset data We use the following two-dimensional array datasource to build up the Family Tree. ``` - var datascource = [ +var datascource = [ + [ + { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' }, + { + 'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true, + 'children': [ + [ + { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'} + ], [ - { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' }, - { - 'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true, + { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female', 'children': [ [ - { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'} - ], - [ - { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female', + + { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true, 'children': [ - [ - - { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true, - 'children': [ - [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }], - [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }], - ] - }, - { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' }, - ] + [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }], + [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }], ] }, - { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true } - ], - [ - { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'} + { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' }, ] ] - } + }, + { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true } + ], + [ + { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'} ] - ]; + ] + } + ] +]; ``` ### how to start up demos locally diff --git a/README.zh-cn.md b/README.zh-cn.md index 8e328df..77759ad 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -121,6 +121,74 @@ $ 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', 'gender': 'male' }, + { + 'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true, + 'children': [ + [ + { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'} + ], + [ + { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female', + 'children': [ + [ + + { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true, + 'children': [ + [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }], + [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }], + ] + }, + { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' }, + ] + ] + }, + { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true } + ], + [ + { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'} + ] + ] + } + ] +]; +``` + ### 本地运行orgchart - 必须安装node.js v6+，因为我们的单元测试是基于jsdom v11。 diff --git a/README.zh-tw.md b/README.zh-tw.md index b499e4d..63b19dd 100644 --- a/README.zh-tw.md +++ b/README.zh-tw.md @@ -121,6 +121,74 @@ $ 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', 'gender': 'male' }, + { + 'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true, + 'children': [ + [ + { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'} + ], + [ + { 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female', + 'children': [ + [ + + { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true, + 'children': [ + [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }], + [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }], + ] + }, + { 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' }, + ] + ] + }, + { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true } + ], + [ + { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'} + ] + ] + } + ] +]; +``` + ### 本地運行orgchart - 必須安裝node.js v6+，因爲我們的單元測試是基于jsdom v11。