在這個用數據說話的時代（靠臉吃飯的年代），沒有一個好的展現形態（沒有一張帥氣清秀的臉蛋），對於整個產品產生的影響，那簡直... ...
在這個用數據說話的時代（靠臉吃飯的年代），沒有一個好的展現形態（沒有一張帥氣清秀的臉蛋），對於整個產品產生的影響，那簡直...
在數據可視化競爭的戰場，互聯網的各家各戶都很註重自家產品的前端展現。這也造成了目前前端各種火到爆，火的不要不要的原因之一。各類新型的框架也是接踵而至，如：emberjs、angluarjs、backbonejs、vuejs以及reactjs等等，這個對目前企業的發展也造成了一定的困擾。
追星派：此派弟子非常註重對新技能的渴求，看到新的技能書，不管前方道路如何坎坷，練了再說。只要是新的技術，馬上應用到產品中，最後放棄的有不少。
保守派：該門徒比較成熟穩重，想要在穩中求勝，觀察形式的發展，最後再做定奪。往往需要一段時間做技術的選型，周期還是蠻長的。
頑固派：這些人一般年紀比較大，不喜世俗新物，只要目前狀況良好，從不考慮吸納新的知識。技術落後了不說，對新入派弟子的轉化率相對要降低很多。
創新派：這批生物，看到形式有變，立馬能幫你變出另一個武功秘籍。典型的就有某寶的成員，這裡充斥各種技術大牛，鍛煉能力的好去處。
一說好像TM的跑到火星上去了。
目前前端的發展屬於一個HTML5的時代，時代的英雄豪傑也是層出不窮，例如：我們的主角D3.js、raphaeljs、國產巨星echarts以及國外猩猩highcharts還有等等。琳瑯滿目，選擇一款合胃口的就行。咱這就來說說，D3js可以幫忙做寫什麼事內？
D3js
D3js是什麼？前面我們也提到了一點，它是一個可視化工具庫。這工具的強大之處，就跟給了你一張紙和一枝筆，隨心所欲，想怎麼畫就怎麼畫，非常符合任性的我們。它藉助html、svg以及css，可以把我們抽象的數據，形象鮮活的呈現出來。D3是一個嚴格遵循WEB標準，所以它對於目前主流的框架都可以很好的相容，當然它也提供了很強大的可視化組件。
官網：https://d3js.org/,它可以輕鬆的使用npm下載（npm i d3）,什麼？你問npm是什麼？（npm：https://en.wikipedia.org/wiki/Npm_(software)）。
強大的可視化組件：https://github.com/d3/d3/wiki/Gallery
小明：老師，你一直在說它如何如何膩害，如何如何強大，那麼能形象生動的具體說說咩？
老師：
場景一：
老闆說，最近我們的人數是越來越多，組織架構也是越來越複雜，是該好好給我們的員工們，理一理組織關係圖了，免得我們的人員找不到自己的組織，躲在廁所哭泣。
按照我們以前的尿性，這不就是一顆樹形結構圖麽，so easy...然後就有了我們以下的圖：
LONG LONG AGO老闆看到之後的表情可能是這樣的：
欣慰
近幾年互聯網老闆看到的可能是這樣的：
無言以對
這個時候如果出現的圖是這樣的：
▲請忽略圖上的內容
這個時候老闆肯定會來一個
就是它了
這個就是D3中的一個tree佈局展現的一個代表形態。能很友好的展現層級關係結構的圖形，非常時候用來描述組織架構這類信息的描述。
場景二
老闆說，最近我看滴滴打車和uber打車很火熱，你看他們的司機版本在地圖上面還能看打車的集中區域圖，這個數據能力可以乾很多事的。我們也需要幫助運維人員來進行產品分析在哪些時段，用的人比較多，幫助運維人員做分析。
這個時候，很多人想到的可能是通俗的家常風格：
▲echarts
我想大家用到的這個echarts圖形應該很多吧，但要是這個時候來一個能脫穎而出的表現力的話，產品在競爭上面必然會加分，比如這樣：
▲d3.heatMap
當然這兩種展現風格各有千秋，就看每個人對它的看法了。
場景三
老闆說需要看到我們的產品有多少機器安裝上了，需要有一個形式展現，並且需要時刻的觀察這個機器上面的一個健康狀況，能直觀的進行數據分析。
這個也是筆者當初拿到手，然後開始著手研究這個展現形式該如何是好。
最初筆者覺得，這個東西，不就是可以用一個列表形態來展示麽。艾瑪，立馬來了一個：
▲表格形態
可是上級總是覺得這是不夠的，沒有亮點。
為了博得眼球，我只能求助於咱的D3黑科技，瞬間就感覺智商已經不欠費了。於是，咱就有了下麵的變種形態類似物：
▲pack layout
以上，很簡略的介紹了D3能幹些什麼，當然，D3遠遠不止是單單隻有這些形態，上面也說了，它的功能很強大，不怕它做不到，就怕你想不到，用在這裡也是很合適的。
它有幾大優勢：
1.適應性高
一般的第三方組件庫，提供的API往往在很多時候，都滿足不了我們百變的需求。而我們的D3很適應這種場合，它可以隨心所欲的儘可能的滿足我們的需求。因為它使用的是SVG，可以和HTML一樣使用CSS來進行修飾。
2.大量的佈局
它可以使用變換（transformation）和濾鏡（filter）等等的動畫效果。有很多的佈局，上面介紹的樹裝圖，還有餅狀、打包圖、矩陣圖等等。
3.縮放不會損失精度
SVG是可以縮放的矢量圖，D3基本是在在SVG上繪製的，所以放大縮小都不會有精度的損失。
總之，就先粗略的介紹這些吧~
作者：祝恩良，優雲軟體一隻活在二次元世界的萌貨，雖然在三次元的世界賣不了一手好萌
優雲軟體：秉承devops的理念，從監控、到應用體驗，到自動化持續交付，全棧運維解決方案服務商 https://uyun.cn
