如何使用 vue + d3 畫一棵樹
vue 和 d3 的角色
畫圖可分為兩步：
- 元素坐標(biāo)計(jì)算
- 數(shù)據(jù)綁定
坐標(biāo)計(jì)算只需要一些 api，本文使用 d3。
數(shù)據(jù)綁定既可以借助 d3，也可以使用 vue。d3 通過操作 dom 實(shí)現(xiàn)，有點(diǎn)像 jQuery，d3 針對(duì)數(shù)據(jù)和 dom 的狀態(tài)提出了三個(gè)概念：Update、Enter、Exit，感興趣的可以看官網(wǎng)。本文使用 vue 做數(shù)據(jù)綁定
總結(jié)：使用 d3 提供的 api 計(jì)算元素坐標(biāo)，使用 vue 進(jìn)行數(shù)據(jù)綁定
坐標(biāo)計(jì)算
一棵樹由節(jié)點(diǎn)和連接構(gòu)成，只需要計(jì)算出這兩種元素的坐標(biāo)
即可
畫一棵樹常見的有兩種數(shù)據(jù)結(jié)構(gòu)，一種是嵌套的，一種是扁平的。如下：
// 嵌套的
var treeData = {
name: '中國(guó)',
children: [{
name: '北京',
children: [{
name: '海淀'
}, {
name: '朝陽(yáng)'
}]
}, {
name: '上海'
}]
};
// 扁平的
var flattenData = [{
name: '中國(guó)',
parent: ''
}, {
name: '北京',
parent: '中國(guó)'
}, {
name: '上海',
parent: '中國(guó)'
}, {
name: '海淀',
parent: '北京'
}, {
name: '朝陽(yáng)',
parent: '北京'
}]
對(duì)于嵌套的數(shù)據(jù)，使用 d3.hierarchy() 計(jì)算坐標(biāo)，對(duì)于扁平的，使用 d3.stratify()。得到的結(jié)構(gòu)如下(列舉根節(jié)點(diǎn))：
var hierarchyNode = {
depth: 0
height: 2
parent: null
x: 60
y: 0,
data: {
name: "中國(guó)"，
children: []
},
children: []
};
得到根節(jié)點(diǎn)后使用 descendants() 獲取所有節(jié)點(diǎn)信息，links() 獲取所有連接信息。節(jié)點(diǎn)的結(jié)構(gòu)如上述，連接結(jié)構(gòu)如下：
var link = {
source: Node,
target: Node
}
至此，已獲取到所有元素的坐標(biāo)
數(shù)據(jù)綁定
使用 svg
樹的節(jié)點(diǎn)就是 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
總結(jié)
以上所述是小編給大家介紹的如何使用 vue + d3 畫一棵樹，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
這篇文章主要介紹了vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue中使用微信公眾號(hào)js-sdk踩坑記錄，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue?@tap事件之$event用法介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue this.reload 方法 配置，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue+Koa2 打包后如何進(jìn)行線上部署，給大家分享了一些問題及解決方法,需要的朋友可以參考下2019-07-07
Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
這篇文章主要介紹了如何在 Vue 中集成 Mozilla/PDF.js ，實(shí)現(xiàn)自定義的 PDF 預(yù)覽器，以及給被預(yù)覽的 PDF 添加水印2021-01-01
Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源
這篇文章主要介紹了Vue實(shí)現(xiàn)項(xiàng)目部署到非根目錄及解決刷新頁(yè)面時(shí)找不到資源問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗(yàn)心得，有需要的朋友跟著小編參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07