Skip to content

Commit e38a6ba

Browse files
dabengdabeng
committed
update doc
1 parent 9d43f1c commit e38a6ba

File tree

3 files changed

+160
-24
lines changed

3 files changed

+160
-24
lines changed

‎README.md‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -171,39 +171,39 @@ You need the solution based on new datasource structure with **levelOffset data
171171

172172
We use the following two-dimensional array datasource to build up the Family Tree.
173173
```
174-
var datascource = [
174+
var datascource = [
175+
[
176+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
177+
{
178+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
179+
'children': [
180+
[
181+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
182+
],
175183
[
176-
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
177-
{
178-
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
184+
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
179185
'children': [
180186
[
181-
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
182-
],
183-
[
184-
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
187+
188+
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
185189
'children': [
186-
[
187-
188-
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
189-
'children': [
190-
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
191-
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
192-
]
193-
},
194-
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
195-
]
190+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
191+
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
196192
]
197193
},
198-
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
199-
],
200-
[
201-
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
194+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
202195
]
203196
]
204-
}
197+
},
198+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
199+
],
200+
[
201+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
205202
]
206-
];
203+
]
204+
}
205+
]
206+
];
207207
```
208208

209209
### how to start up demos locally

‎README.zh-cn.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,74 @@ $ npm install orgchart
121121

122122
没问题，我们推荐使用ES6的模版字符串。
123123

124+
- [我想将节点安置在特定的层级. 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
125+
126+
![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
127+
128+
你需要的是一个复合的解决方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
129+
130+
- [我想构造一个组织结构图，每个节点宽度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
131+
132+
![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
133+
134+
- [我想在混合布局中实现拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
135+
136+
- [我想指定从某一分支开始，其下所有子节点都以垂直样式显示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
137+
138+
![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
139+
140+
**hybrid data property** 就派上用场了. 在数据源的某个节点中提供"hybrid"属性，那么它的所有后代节点都会垂直布局.
141+
142+
- [我想用Font Awesome图标代替内置的图标](https://dabeng.github.io/OrgChart/custom-icons.html)
143+
144+
- [子节点众多的时候，我想以一种压缩起来的展示方式尽可能节省空间](https://dabeng.github.io/OrgChart/data-prop-compact.html)
145+
146+
![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
147+
148+
**compact data property** 就派上用场了. 在数据源的某个节点里提供了"compact"属性，并赋为真值，那么它和它的子节点就会展示为压缩模式。
149+
150+
- [我想构造族谱，家谱，宗谱的关系图](https://dabeng.github.io/OrgChart/family-tree.html)
151+
152+
![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
153+
154+
我们使用如下的二维数组数据源来构建家谱。“outsider”代表外姓人。
155+
156+
```
157+
var datascource = [
158+
[
159+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
160+
{
161+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
162+
'children': [
163+
[
164+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
165+
],
166+
[
167+
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
168+
'children': [
169+
[
170+
171+
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
172+
'children': [
173+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
174+
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
175+
]
176+
},
177+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
178+
]
179+
]
180+
},
181+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
182+
],
183+
[
184+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
185+
]
186+
]
187+
}
188+
]
189+
];
190+
```
191+
124192
### 本地运行orgchart
125193

126194
- 必须安装node.js v6+，因为我们的单元测试是基于jsdom v11。

‎README.zh-tw.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,74 @@ $ npm install orgchart
121121

122122
沒問題，我們推薦使用ES6的模版字符串。
123123

124+
- [我想將節點安置在特定的層級。 咋做 ?](https://dabeng.github.io/OrgChart/level-offset.html)
125+
126+
![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)
127+
128+
你需要的是一個復合的解決方案： **levelOffset data prop** + callback createNode() + CSS custom properties(variables)
129+
130+
- [我想構造一個組織結構圖，每個節點寬度都可以不同的](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)
131+
132+
![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)
133+
134+
- [我想在混合布局中實現拖/放功能](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)
135+
136+
- [我想指定從某一分支開始，其下所有子節點都以垂直樣式顯示](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)
137+
138+
![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)
139+
140+
**hybrid data property** 就派上用場了。 在數據源的某個節點中提供"hybrid"屬性，那麽它的所有後代節點都會垂直布局。
141+
142+
- [我想用Font Awesome圖標代替內置的圖標](https://dabeng.github.io/OrgChart/custom-icons.html)
143+
144+
- [子節點眾多的時候，我想以一種壓縮起來的展示方式盡可能節省空間](https://dabeng.github.io/OrgChart/data-prop-compact.html)
145+
146+
![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)
147+
148+
**compact data property** 就派上用場了。在數據源的某個節點裏提供了"compact"屬性，並賦為真值，那麽它和它的子節點就會展示為壓縮模式。
149+
150+
- [我想構造族譜，家譜，宗譜的關系圖](https://dabeng.github.io/OrgChart/family-tree.html)
151+
152+
![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)
153+
154+
我們使用如下的二維數組數據源來構建家譜。“outsider”代表外姓人。
155+
156+
```
157+
var datascource = [
158+
[
159+
{ 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather', 'gender': 'male' },
160+
{
161+
'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother', 'gender': 'female', 'outsider': true,
162+
'children': [
163+
[
164+
{ 'id': '2', 'name': 'Bo miao', 'title': 'Aunt', 'gender': 'female'}
165+
],
166+
[
167+
{ 'id': '3', 'name': 'Su Miao', 'title': 'Mother', 'gender': 'female',
168+
'children': [
169+
[
170+
171+
{ 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'gender': 'female', 'outsider': true,
172+
'children': [
173+
[{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter', 'gender': 'female' }],
174+
[{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter', 'gender': 'female' }],
175+
]
176+
},
177+
{ 'id': '5', 'name': 'Hei Hei', 'title': 'Me', 'gender': 'male' },
178+
]
179+
]
180+
},
181+
{ 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'gender': 'male', 'outsider': true }
182+
],
183+
[
184+
{ 'id': '10', 'name': 'Hong miao', 'title': 'Aunt', 'gender': 'female'}
185+
]
186+
]
187+
}
188+
]
189+
];
190+
```
191+
124192
### 本地運行orgchart
125193

126194
- 必須安裝node.js v6+，因爲我們的單元測試是基于jsdom v11。

0 commit comments

Comments
 (0)