快捷導(dǎo)航

D3.js實(shí)現(xiàn)繪制和弦圖的教程詳解

更新時(shí)間：2022年11月16日 08:45:19 作者：FinGet

弦圖，是一種表示實(shí)體之間相互關(guān)系的圖形方法。這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實(shí)現(xiàn)繪制和弦圖，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下

弦圖，是一種表示實(shí)體之間相互關(guān)系的圖形方法。直觀的看，弦圖由節(jié)點(diǎn)分段和弧形的邊構(gòu)成。節(jié)點(diǎn)分段沿圓周排列，節(jié)點(diǎn)之間的關(guān)系通過使用弧線或貝塞爾曲線相互連接。值得注意的是，這些弧線是有寬度的，且起止寬度可以不一樣。這本質(zhì)上是因?yàn)?，弧線的寬度反映了一種矩陣關(guān)系（例如A[1,2]=3，A[2,1]=4），因此取值是雙向的。——圖之典

d3.chord

const population = [
    [1000, 3045, 4567, 1234, 3714],
    [3214, 2000, 2060, 124, 3234],
    [8761, 6545, 3000, 8045, 647],
    [3211, 1067, 3214, 4000, 1006],
    [2146, 1034, 6745, 4764, 5000]
];

const chords = d3.chord()(population);
console.log(chords);

chord ( matrix )的返回值是一個(gè)chords數(shù)組，其中每個(gè) chord 代表兩個(gè)節(jié)點(diǎn)i和j之間的組合雙向流（其中i可能等于j）并且是具有以下屬性的對(duì)象：

source- 該弦的源子分組對(duì)象
target- 該弦的目標(biāo)子分組對(duì)象

每個(gè)源和目標(biāo)子組也是具有以下屬性的對(duì)象：

startAngle- 以弧度為單位的起始角度
endAngle- 以弧度表示的結(jié)束角度
value- 流量值矩陣[ i ] [ j ]
index- 節(jié)點(diǎn)索引i

d3.chord還有一些屬性：

padAngle - 設(shè)置或獲取相鄰分組之間的間隔，默認(rèn)為 0
sortChords - 設(shè)置或獲取弦的排序規(guī)則
sortGroups - 設(shè)置或獲取分組的排序規(guī)則
sortSubGroups - 設(shè)置獲取子分組的排序規(guī)則

和弦圖由兩部分組成:分組的環(huán)形圖+表示流量的弦圖，d3.chord返回的數(shù)據(jù)就是弦數(shù)據(jù),通常傳遞給d3.ribbon來(lái)顯示相互之間的流量關(guān)系，弦圖數(shù)組也包含了另一個(gè)表示分組的屬性chords.groups,表示計(jì)算后的分組數(shù)組,分組包含以下屬性:

startAngle - 起始角度
endAngle - 終止角度
value - 從節(jié)點(diǎn) i 出去的總量
index - 節(jié)點(diǎn)索引 i

分組數(shù)據(jù)傳遞給d3.arc來(lái)繪制。

弦數(shù)據(jù)和分組數(shù)據(jù)就組成了一個(gè)完整的和弦圖。

d3.ribbon

const ribbon = d3.ribbon();
ribbon({
  source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
  target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
}); 
// "M164.0162810494058,-175.21032946354026A240,240,0,0,1,216.1595644740915,-104.28347273835429Q0,0,229.9158815306728,68.8381247563705A240,240,0,0,1,219.77316791012538,96.43523560788266Q0,0,164.0162810494058,-175.21032946354026Z"

從示例我們可以看到，ribbon通過傳入的數(shù)據(jù)source和target就可以幫我們生成一個(gè)path路徑，有了路徑就可以輕松的繪制弦圖了。

const ribbon = d3.ribbon()
.radius(100); // 指定半徑大小

chordG.selectAll("path")
    .data(chords)
    .enter()
    .append("path")
    .attr("fill", function (d, i) {
    return color(i);
    })
    .attr("d", ribbon);

繪制分組環(huán)形圖

通過chrods.groups數(shù)據(jù)，加上d3.arc就可以輕易的繪制出環(huán)形圖了，這里和D3(v7)入門七：餅圖、環(huán)圖、玫瑰圖，不清楚的可以回顧一下。

//創(chuàng)建繪制器
const arc = d3.arc().innerRadius(100).outerRadius(130);
//繪制
groupG.selectAll("path")
    .data(chords.groups)
    .enter()
    .append("path")
    .attr("fill", function (d, i) {
    return color(i);
    })
    .attr("d", arc);

總結(jié)

完成的示例，可以點(diǎn)擊查看Demo!

寫到這章，我們可以更清晰的理解一下D3這個(gè)庫(kù)所做的事——窺一斑而知全豹。

對(duì)于折線圖、柱狀圖這類簡(jiǎn)單圖形，他提供比例尺、坐標(biāo)軸、以及d3.line,d3.area幫我們生成復(fù)雜的path路徑。

對(duì)于餅圖、環(huán)圖、弦圖他提供了成對(duì)的方法: d3.pie和d3.arc,d3.chord和d3.ribbon。

核心就是處理數(shù)據(jù)和通過數(shù)據(jù)生成path 路徑，給用戶最簡(jiǎn)單的方式來(lái)繪制圖表，可以聯(lián)想到后面會(huì)介紹到的力向?qū)D、地圖、樹圖都是這般操作。D3幫我們解決了最大的問題：處理數(shù)據(jù)生成關(guān)聯(lián)性，通過數(shù)據(jù)再生成path路徑，就像一個(gè)工程車間，我們只需要給原料(數(shù)據(jù)),最后就能得到成品(圖形數(shù)據(jù)),最后怎么包裝(繪制)就由用戶自己控制。

到此這篇關(guān)于D3.js實(shí)現(xiàn)繪制和弦圖的教程詳解的文章就介紹到這了,更多相關(guān)D3.js繪制和弦圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: