想做個后台系統，畫各種統計圖表。特殊圖表是必不可少的。這兩天看了下D3.js。學習下如何使用D3。以前做項目，需要各種特效圖，都是在網上找例子，下載以后直接修改。很多是只會用，卻不了解里面的結構和原理。這樣做一些一般應用還可以。遇到需要高度定制化的開發就沒辦法了。所以這個時候D3就很管用，它可以讓你深度定制化開發特殊圖標，達到百分百的自己完全控制。
首先是安裝D3，用npm是非常方便的
npm install d3 --save
安裝好以后，就是V4版本，版本號4.10.0 。所以網上的很多例子都是V3版本的，在V4內都運行不了，需要自己去修改。在每個Ts文件內 添加 import * as d3 from 'd3';
import { Component, OnInit,Inject } from '@angular/core';
import { Auxiliary } from '../../../common/constants/auxiliary';
import * as d3 from 'd3';
導入D3 的包。Github 上有很多基於angular框架在對d3.js封裝的項目。但我覺得，我們就直接使用D3源生庫就可以。沒必要使用各個angular在封裝，使用了就是多此一舉，並且丟失了D3源生庫的靈活性。在angular的前端程序里，盡量不要用D3來獲取body，直接用一個Div 加ID 定位就好。
我這是根據網上的例子，重寫在angular內，修改V3和V4的版本差異。做了三個例子：一個曲線，一個折線圖，一個地圖。
代碼上沒有什么復雜技術點，也沒有什么技術難點，就是重加工網上的D3例子，改寫在angular4內。可以給以后的人做一個參考。相關代碼還是從github上看吧。這里不貼了。
demo 演示地址 http://121.42.203.123
github地址 https://github.com/Vetkdf/yang-test