github pages
javascript
画图可分为两步:html
坐标计算只须要一些 api,本文使用 d3。
数据绑定既能够借助 d3,也能够使用 vue。d3 经过操做 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update、Enter、Exit,感兴趣的能够看官网。本文使用 vue 作数据绑定vue
总结:使用 d3 提供的 api 计算元素坐标,使用 vue 进行数据绑定java
一棵树由节点和链接构成,只须要计算出这两种元素的坐标便可node
画一棵树常见的有两种数据结构,一种是嵌套的,一种是扁平的。以下:git
// 嵌套的
var treeData = {
name: '中国',
children: [{
name: '北京',
children: [{
name: '海淀'
}, {
name: '朝阳'
}]
}, {
name: '上海'
}]
};
// 扁平的
var flattenData = [{
name: '中国',
parent: ''
}, {
name: '北京',
parent: '中国'
}, {
name: '上海',
parent: '中国'
}, {
name: '海淀',
parent: '北京'
}, {
name: '朝阳',
parent: '北京'
}]
复制代码
对于嵌套的数据,使用 d3.hierarchy() 计算坐标,对于扁平的,使用 d3.stratify()。获得的结构以下(列举根节点):github
var hierarchyNode = {
depth: 0
height: 2
parent: null
x: 60
y: 0,
data: {
name: "中国",
children: []
},
children: []
};
复制代码
获得根节点后使用 descendants() 获取全部节点信息,links() 获取全部链接信息。节点的结构如上述,链接结构以下:api
var link = {
source: Node,
target: Node
}
复制代码
至此,已获取到全部元素的坐标数据结构
使用 svgdom
树的节点就是 rect + text,以下:
<g :transform="rootTransform">
<rect :width="nodeWidth" :height="nodeHeight" :fill="nodeFill"></rect>
<text :fill="nodeTextColor" text-anchor="middle" dominant-baseline="middle" :y="nodeHeight / 2" :x="nodeWidth / 2">{{node.data.name}}</text>
</g>
复制代码
链接就是 path,以下:
<g>
<path :d="getLinkPath(link)" :stroke="linkStroke" fill="none" :stroke-width="linkStrokeWidth"></path>
</g>
复制代码
talk is cheap show me the code