用 vue + d3 畫一棵樹

結果預覽

github pages

vue 和 d3 的角色

畫圖可分爲兩步：

1. 元素座標計算
2. 數據綁定

座標計算只須要一些 api，本文使用 d3。
數據綁定既能夠藉助 d3，也能夠使用 vue。d3 經過操做 dom 實現，有點像 jQuery，d3 針對數據和 dom 的狀態提出了三個概念：Update、Enter、Exit，感興趣的能夠看官網。本文使用 vue 作數據綁定

總結：使用 d3 提供的 api 計算元素座標，使用 vue 進行數據綁定

座標計算

一棵樹由節點和鏈接構成，只須要計算出這兩種元素的座標便可

畫一棵樹常見的有兩種數據結構，一種是嵌套的，一種是扁平的。以下：

// 嵌套的
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()。獲得的結構以下(列舉根節點)：

var hierarchyNode = {
    depth: 0
    height: 2
    parent: null
    x: 60
    y: 0,
    data: {
       name: "中國"，
       children: [] 
    },
    children: []
};
複製代碼

獲得根節點後使用 descendants() 獲取全部節點信息，links() 獲取全部鏈接信息。節點的結構如上述，鏈接結構以下：

var link = {
    source: Node,
    target: Node
}
複製代碼

至此，已獲取到全部元素的座標

數據綁定

使用 svg

樹的節點就是 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>
複製代碼

code

talk is cheap show me the code

github/vue-d3-tree-example