Angular4 後臺管理系統搭建（6） - 和D3.js V4版本結合畫圖

    想作個後臺系統，畫各類統計圖表。特殊圖表是必不可少的。這兩天看了下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