如何使用 vue + d3 畫一棵樹
vue 和 d3 的角色
畫圖可分為兩步：
- 元素坐標計算
- 數(shù)據(jù)綁定
坐標計算只需要一些 api，本文使用 d3。
數(shù)據(jù)綁定既可以借助 d3，也可以使用 vue。d3 通過操作 dom 實現(xiàn)，有點像 jQuery，d3 針對數(shù)據(jù)和 dom 的狀態(tài)提出了三個概念：Update、Enter、Exit，感興趣的可以看官網(wǎng)。本文使用 vue 做數(shù)據(jù)綁定
總結(jié)：使用 d3 提供的 api 計算元素坐標，使用 vue 進行數(shù)據(jù)綁定
坐標計算
一棵樹由節(jié)點和連接構(gòu)成，只需要計算出這兩種元素的坐標
即可
畫一棵樹常見的有兩種數(shù)據(jù)結(jié)構(gòu)，一種是嵌套的，一種是扁平的。如下：
// 嵌套的
var treeData = {
name: '中國',
children: [{
name: '北京',
children: [{
name: '海淀'
}, {
name: '朝陽'
}]
}, {
name: '上海'
}]
};
// 扁平的
var flattenData = [{
name: '中國',
parent: ''
}, {
name: '北京',
parent: '中國'
}, {
name: '上海',
parent: '中國'
}, {
name: '海淀',
parent: '北京'
}, {
name: '朝陽',
parent: '北京'
}]
對于嵌套的數(shù)據(jù)，使用 d3.hierarchy() 計算坐標，對于扁平的，使用 d3.stratify()。得到的結(jié)構(gòu)如下(列舉根節(jié)點)：
var hierarchyNode = {
depth: 0
height: 2
parent: null
x: 60
y: 0,
data: {
name: "中國"，
children: []
},
children: []
};
得到根節(jié)點后使用 descendants() 獲取所有節(jié)點信息，links() 獲取所有連接信息。節(jié)點的結(jié)構(gòu)如上述，連接結(jié)構(gòu)如下：
var link = {
source: Node,
target: Node
}
至此，已獲取到所有元素的坐標
數(shù)據(jù)綁定
使用 svg
樹的節(jié)點就是 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 畫一棵樹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
詳解vue beforeRouteEnter 異步獲取數(shù)據(jù)給實例問題
這篇文章主要介紹了vue beforeRouteEnter 異步獲取數(shù)據(jù)給實例問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue中通過使用$attrs實現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種，之所以有這么多種方式，是為了滿足在不同場景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了快速搭建vue2.0+boostrap項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
頁面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時候遇到了點麻煩,所以記錄下來,希望可以幫助有需要的人2023-09-09
本文主要介紹了Vue如何設置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價刷新的案列給大家詳細講解，需要的朋友可以參考下2022-11-11
Vue 報錯TypeError: this.$set is not a function 的解決方法
這篇文章主要介紹了Vue 報錯TypeError: this.$set is not a function 的解決方法，分享給大家，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程(無瑕疵,完美版)
突然接到公司需求,說客戶想讓我們把項目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項目打包成exe可執(zhí)行文件的實現(xiàn)過程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-11-11
關(guān)于Vue.nextTick()的正確使用方法淺析
最近在項目中遇到了一個需求，我們通過Vue.nextTick()來解決這一需求，但發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以自己來總結(jié)下，下面這篇文章主要給大家介紹了關(guān)于Vue.nextTick()正確使用方法的相關(guān)資料，需要的朋友可以參考下。2017-08-08