由淺入深的 D3.js (v5/v4) 初級及進階指南 之零 背景介紹與環境安裝

由淺入深的 D3.js 初級及進階指南–零 背景介紹與環境安裝

毋庸置疑的是圖表在頁面中發揮着重要的作用.而對圖表進行封裝的插件/組件也是層出不窮,像 ECharts 、HighChart 、G2 等.這些都是非常優秀的圖表組件.我也在實際項目中使用過 ECharts 做各種圖表,也是發現了它的強大之處,但隨着工作的複雜以及其他要求,ECharts 這種告訴封裝的圖表組件開始不能滿足我們的設計需求,所以現在使用 D3.js 作爲我們的圖表開發庫,來開發我們公司使用的通用圖表組件.
這裏是將自己學習 D3.js 中的筆記以及自己的感悟記錄下來,與大家討論.學習 D3.js 之後,相信限制大家作圖的只有想象力了.

因爲在實際工作中使用的框架是 Ember.js (非常推薦大家使用).所以這裏就使用 Ember.js 開發. 當然,框架只是一個工具,實現圖表的方法都被封裝進一個個的函數中,所以 D3.js 的學習跟框架是沒有關係的.這系列文章同樣適用於使用 React.js 、Vue.js的小夥伴們.

所需環境:

• ember-cli v3.16.1
• node v10.16.0
• d3.js v5

項目地址 與 在線預覽圖表展示

0. 前言

在 知乎作者 ciga2011 的回答裏看到這樣的對 D3.js 學習的描述:

1. 它是聲明式的，不是命令式的d3的第一個核心是：數據驅動的dom元素創建，把這個思想上的彎繞過來，掌握1/3了;
2. 它是數據處理包，不是圖形繪製包d3的第二個核心是：它的大量的api，提供的是對數據的轉換與處理，無論是scale、layout還是svg.line等，都僅僅是對數據的處理，和繪製圖形與DOM操作沒有半毛關係。把這個思想上的彎繞過來，又掌握1/3了;
3. 它的api通常返回的是一個函數，這個函數的具體功能，通過函數對象的方法約定。d3的javascript寫法不是那麼符合常人的邏輯，比如：調用d3.svg.line()，這個我們獲得的是一個line函數，作用是把原始數據轉化成svg的path元素的d屬性需要的字符串，如果連起來寫的話是這樣：var nd=d3.svg.line()(data); 這樣獲得的nd纔是可以塞給path的d屬性的東西。把這個思想上的彎繞過來，又掌握1/3.

以上三點轉過來以後，基本算理解d3背後的思路了，大約看文檔也可以獨立寫點東西出來了。d3的使用模式如下：

• step1：準備數據
• step2：創建dom
• step3：設置屬性

現在當然可以只是直道這段話就可以,我們會在以後的學習過程中經常有這樣的感受的.
那現在就開始對環境進行配置.

1. 前期工作

1.1 修改 Ember.js 項目爲 Pods 目錄（可選）

// config/environment.js
let ENV = {
    modulePrefix: 'ember-d3-demo',
    podModulePrefix: 'ember-d3-demo/modules',
    // ...
  };

// .ember-cli
{
  "disableAnalytics": false,
  "usePods": true
}

1.2 依賴安裝

首先是可選安裝 typescript

ember install ember-cli-typescript

更多在 Ember.js 中使用 Typescript 的內容 請查看 .
安裝 D3.js， 由於上面是使用了 typescript，所以安裝命令變爲：

ember install ember-d3 && npm i --save @types/d3

如果沒有安裝 typescript 那就按照官方教程正常安裝即可：

ember install ember-d3 && yarn add --save-dev d3@5.15.0

至此，關於 D3.js 的依賴安裝完畢，如果是非 ember octane 版本，這時候可以跳過下面的說明，繼續使用了。
由於octane 版本中修改了 component / controller / route 等改爲類的繼承與擴展。對於 component 來說就是組件的聲明週期不再是 didInsertElement ，而是變成了使用 modifier .就需要多一步的安裝：

ember install @ember/render-modifiers

注意：以後的 ember 版本可能會默認添加此 modifier
至此我們的環境就安裝完畢了.下一章讓我們開始進入 D3.js 的世界.