d3.js 入門指南

　　說到數據可視化，咱們會行到不少優秀的框架，像echarts、highcharts，這些框架很優雅，健壯，能知足咱們對可視化的大部分需求，可是缺點也很明顯，就是這些框架幾乎是不可定製化的，當遇到特殊的需求，那就太難了。這個時候，聰明的小夥伴會轉而學習一些基礎的，定製化程度更高的框架，而其中最傑出的就是D3.js，因爲我是專爲北京地鐵定製化軟件，常常會用到數據可視化，廢話很少說先上北京地鐵路網，由於今天是入門教程，可是我不想講svg基礎知識，只講一點基礎內容餅圖,大佬請繞行。

1.繪製餅圖的預備知識

1. 1.比例尺的使用
2. 2.餅圖佈局的使用
3. 3.弧生成器的使用

1.比例尺的使用

　　d3中有不少種比例尺，其中有四種常常使用，分別是scaleLinear線性比例尺，scaleOrdinal序數比例尺，scaleBand序數段比例尺，scaleTime時間比例尺。今天咱們只介紹序數比例尺。

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

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

2.餅圖佈局的使用

d3中一樣有不少種佈局，佈局並無繪製的做用，他只是將原始數據轉換成繪製圖形所須要的數據的方法。餅圖佈局就是將數據轉換成繪製餅圖所須要的數據，如startAngle,endAngle,index,data等數據。

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

　　sort方法是先將傳入方法的數據作排序處理，默認降序，null參數，即保留原數據局順序。
　　value方法是選擇佈局要處理的數據，即按照傳入對象的number屬性值排序。既然佈局是一個方法，那麼試用起來很是簡單

var pieData = pie(dataset);

　　這裏pieData就是咱們須要的數據

3.弧生成器的使用

　　d3中大部分圖形都是經過path繪製的，弧生成器，就是將數據繪製出path的d屬性。

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

　　innerRadius爲繪製弧的內徑，outerRadius爲繪製弧的內徑，使用方式以下

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

　　由於咱們的佈局就是將數據處理成startAngle,endAngle這種形式，那麼畫出餅圖就變得很是簡單

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

　　這就生成了一個餅圖。

2.完整的畫一個餅圖

1.分組

　　想作好一個d3的項目，分析必不可少，好的分組能代碼更簡潔優雅。餅圖大體分四個部分

1. 弧形部分
2. 虛線部分
3. 文字部分
4. 中心詳情部分

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.生成數據方法

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

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

　　merge()方法能夠把update和enter部分的操做合一，更加方便數據更新。

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.繪製折線

　　由於每次數據的變化勢必會影響折線的位置，這裏要作一些計算

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)爲當前扇形的中心座標，arc.centroid(d)[0]爲x座標，arc.centroid(d)[1]爲y座標。

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

　　這段代碼是判斷扇形是屬於左半面仍是右半面。

5.加入一些動畫。

　　transition(動畫)能讓圖形更加優雅的變化。這裏主要是學習一下attrTween，直接看文檔我就很少說了。具體代碼請移步至餅圖。

　　後續將發佈更多的教程。

 

原創博客：轉載請註明d3.js 入門指南