說到數(shù)據(jù)可視化，我們會行到很多優(yōu)秀的框架，像echarts、highcharts，這些框架很優(yōu)雅，健壯，能滿足我們對可視化的大部分需求，但是缺點也很明顯，就是這些框架幾乎是不可定制化的，當(dāng)遇到特殊的需求，那就太難了。這個時候，聰明的小伙伴會轉(zhuǎn)而學(xué)習(xí)一些基礎(chǔ)的，定制化程度更高的框架，而其中最杰出的就是D3.js，由于我是專為北京地鐵定制化軟件，經(jīng)常會用到數(shù)據(jù)可視化，廢話不多說先上北京地鐵路網(wǎng)，因為今天是入門教程，但是我不想講svg基礎(chǔ)知識，只講一點基礎(chǔ)內(nèi)容餅圖,大佬請繞行。

1.繪制餅圖的預(yù)備知識

1.比例尺的使用

2.餅圖布局的使用

3.弧生成器的使用

1.比例尺的使用

　　d3中有很多種比例尺，其中有四種經(jīng)常使用，分別是scaleLinear線性比例尺，scaleOrdinal序數(shù)比例尺，scaleBand序數(shù)段比例尺，scaleTime時間比例尺。今天我們只介紹序數(shù)比例尺。

const colorList = ["#ffa39e", "#eaff8f", "#87e8de", "#ffd591", "#91d5ff", "#ffadd2", "#ffe58f"]; const color = d3.scaleOrdinal().domain(colorList.map((d,i) => i)).range(colorList)

使用序數(shù)比例尺將索引和顏色對應(yīng)，如color(1) --> "#eaff8f"

2.餅圖布局的使用

d3中同樣有很多種布局，布局并沒有繪制的作用，他只是將原始數(shù)據(jù)轉(zhuǎn)換成繪制圖形所需要的數(shù)據(jù)的方法。餅圖布局就是將數(shù)據(jù)轉(zhuǎn)換成繪制餅圖所需要的數(shù)據(jù)，如startAngle,endAngle,index,data等數(shù)據(jù)。

let pie = d3.pie().sort(null).value(d => d.number);

　　sort方法是先將傳入方法的數(shù)據(jù)做排序處理，默認(rèn)降序，null參數(shù)，即保留原數(shù)據(jù)局順序。
　　value方法是選擇布局要處理的數(shù)據(jù)，即按照傳入對象的number屬性值排序。既然布局是一個方法，那么試用起來非常簡單

var pieData = pie(dataset);

　　這里pieData就是我們需要的數(shù)據(jù)

3.弧生成器的使用

　　d3中大部分圖形都是通過path繪制的，弧生成器，就是將數(shù)據(jù)繪制出path的d屬性。

let arc = d3.arc().innerRadius(100).outerRadius(200);

　　innerRadius為繪制弧的內(nèi)徑，outerRadius為繪制弧的內(nèi)徑，使用方式如下

arc({startAngle: 0, endAngle: 2})

　　因為我們的布局就是將數(shù)據(jù)處理成startAngle,endAngle這種形式，那么畫出餅圖就變得非常簡單

selection.data(pieData).enter().append('path').attr('d', (d) => arc(d))

　　這就生成了一個餅圖。

2.完整的畫一個餅圖

1.分組

　　想做好一個d3的項目，分析必不可少，好的分組能代碼更簡潔優(yōu)雅。餅圖大致分四個部分

弧形部分

虛線部分

文字部分

中心詳情部分

group.append('g').attr('class', 'pies'); group.append('g').attr('class', 'lines'); group.append('g').attr('class', 'texts'); const centersT = group.append('g').append('text').attr('x', 0).attr('y', 0).attr('text-anchor', 'middle').attr('dy', '-1.6em').attr('font-size', 30).attr('fill', 'none').attr('stroke', '#888').text(''); const centersC = group.append('g').append('text').attr('x', 0).attr('y', 0).attr('text-anchor', 'middle').attr('dy', '0em').attr('font-size', 30).attr('fill', 'none').attr('stroke', '#888').text(''); const centersB = group.append('g').append('text').attr('x', 0).attr('y', 0).attr('text-anchor', 'middle').attr('dy', '1.6em').attr('font-size', 30).attr('fill', 'none').attr('stroke', '#888').text('');

　　這里中心詳情部分我為了簡單就沒有分組。只把三大塊分了組。

2.生成數(shù)據(jù)方法

const initData = () => {dataset = dataset.map( d => {return {name: d.name,number: Math.floor(Math.random() * 1000 + 100)}}) }

3.使用merge()方法將數(shù)據(jù)更新。

　　merge()方法可以把update和enter部分的操作合一，更加方便數(shù)據(jù)更新。

let pathUpdate = group.select('.pies').selectAll('path.pie').data(pieData) let pathEnter = pathUpdate.enter().append('path'); pathEnter.merge(pathUpdate).attr('fill', (d,i) => color(i)).attr('class', 'pie').attrTween('d', function (d) {return arc(d)})

4.繪制折線

　　因為每次數(shù)據(jù)的變化勢必會影響折線的位置，這里要做一些計算

let polylineUpdate = group.select('.lines').selectAll('polyline').data(pieData); let polylineEnter = polylineUpdate.enter().append('polyline');polylineEnter.merge(polylineUpdate).attr('fill', 'none').attr('stroke', '#333').attr('stroke-dasharray', '5,5').attr('points', d => {let direction = (d.startAngle + d.endAngle < Math.PI * 2 ? 1 : -1);return [arc.centroid(d), arc.centroid(d)[0] * 1.6, arc.centroid(d)[1] * 1.6, (innerRadius + outerRadius) * direction, arc.centroid(d)[1] * 1.6]})

　　這里的arc.centroid(d)為當(dāng)前扇形的中心坐標(biāo)，arc.centroid(d)[0]為x坐標(biāo)，arc.centroid(d)[1]為y坐標(biāo)。

(d.startAngle + d.endAngle < Math.PI * 2 ? 1 : -1);

　　這段代碼是判斷扇形是屬于左半面還是右半面。

5.加入一些動畫。

　　transition(動畫)能讓圖形更加優(yōu)雅的變化。這里主要是學(xué)習(xí)一下attrTween，直接看文檔我就不多說了。具體代碼請移步至餅圖。

　　后續(xù)將發(fā)布更多的教程。

?

原創(chuàng)博客：轉(zhuǎn)載請注明d3.js 入門指南

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/vadim-web/p/11270850.html

總結(jié)

以上是生活随笔為你收集整理的d3.js 入门指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。