在這個用數(shù)據(jù)說話的時代（靠臉吃飯的年代），沒有一個好的展現(xiàn)形態(tài)（沒有一張帥氣清秀的臉蛋），對于整個產(chǎn)品產(chǎn)生的影響，那簡直...

在數(shù)據(jù)可視化競爭的戰(zhàn)場，互聯(lián)網(wǎng)的各家各戶都很注重自家產(chǎn)品的前端展現(xiàn)。這也造成了目前前端各種火到爆，火的不要不要的原因之一。各類新型的框架也是接踵而至，如：emberjs、angluarjs、backbonejs、vuejs以及reactjs等等，這個對目前企業(yè)的發(fā)展也造成了一定的困擾。

追星派：此派弟子非常注重對新技能的渴求，看到新的技能書，不管前方道路如何坎坷，練了再說。只要是新的技術(shù)，馬上應(yīng)用到產(chǎn)品中，最后放棄的有不少。

保守派：該門徒比較成熟穩(wěn)重，想要在穩(wěn)中求勝，觀察形式的發(fā)展，最后再做定奪。往往需要一段時間做技術(shù)的選型，周期還是蠻長的。

頑固派：這些人一般年紀(jì)比較大，不喜世俗新物，只要目前狀況良好，從不考慮吸納新的知識。技術(shù)落后了不說，對新入派弟子的轉(zhuǎn)化率相對要降低很多。

創(chuàng)新派：這批生物，看到形式有變，立馬能幫你變出另一個武功秘籍。典型的就有某寶的成員，這里充斥各種技術(shù)大牛，鍛煉能力的好去處。

一說好像TM的跑到火星上去了。

目前前端的發(fā)展屬于一個HTML5的時代，時代的英雄豪杰也是層出不窮，例如：我們的主角D3.js、raphaeljs、國產(chǎn)巨星echarts以及國外猩猩highcharts還有等等。琳瑯滿目，選擇一款合胃口的就行。咱這就來說說，D3js可以幫忙做寫什么事內(nèi)？

D3js

D3js是什么？前面我們也提到了一點，它是一個可視化工具庫。這工具的強大之處，就跟給了你一張紙和一枝筆，隨心所欲，想怎么畫就怎么畫，非常符合任性的我們。它借助html、svg以及css，可以把我們抽象的數(shù)據(jù)，形象鮮活的呈現(xiàn)出來。D3是一個嚴(yán)格遵循WEB標(biāo)準(zhǔn)，所以它對于目前主流的框架都可以很好的兼容，當(dāng)然它也提供了很強大的可視化組件。

官網(wǎng)：https://d3js.org/,它可以輕松的使用npm下載（npm i d3）,什么？你問npm是什么？（npm：https://en.wikipedia.org/wiki/Npm_(software)）。

強大的可視化組件：https://github.com/d3/d3/wiki/Gallery

小明：老師，你一直在說它如何如何膩害，如何如何強大，那么能形象生動的具體說說咩？

老師：

場景一：

老板說，最近我們的人數(shù)是越來越多，組織架構(gòu)也是越來越復(fù)雜，是該好好給我們的員工們，理一理組織關(guān)系圖了，免得我們的人員找不到自己的組織，躲在廁所哭泣。

按照我們以前的尿性，這不就是一顆樹形結(jié)構(gòu)圖么，so easy...然后就有了我們以下的圖：

LONG LONG AGO老板看到之后的表情可能是這樣的：

欣慰

近幾年互聯(lián)網(wǎng)老板看到的可能是這樣的：

無言以對

這個時候如果出現(xiàn)的圖是這樣的：

▲請忽略圖上的內(nèi)容

這個時候老板肯定會來一個

就是它了

這個就是D3中的一個tree布局展現(xiàn)的一個代表形態(tài)。能很友好的展現(xiàn)層級關(guān)系結(jié)構(gòu)的圖形，非常時候用來描述組織架構(gòu)這類信息的描述。

場景二

老板說，最近我看滴滴打車和uber打車很火熱，你看他們的司機版本在地圖上面還能看打車的集中區(qū)域圖，這個數(shù)據(jù)能力可以干很多事的。我們也需要幫助運維人員來進行產(chǎn)品分析在哪些時段，用的人比較多，幫助運維人員做分析。

這個時候，很多人想到的可能是通俗的家常風(fēng)格：

▲echarts

我想大家用到的這個echarts圖形應(yīng)該很多吧，但要是這個時候來一個能脫穎而出的表現(xiàn)力的話，產(chǎn)品在競爭上面必然會加分，比如這樣：

▲d3.heatMap

當(dāng)然這兩種展現(xiàn)風(fēng)格各有千秋，就看每個人對它的看法了。

場景三

老板說需要看到我們的產(chǎn)品有多少機器安裝上了，需要有一個形式展現(xiàn)，并且需要時刻的觀察這個機器上面的一個健康狀況，能直觀的進行數(shù)據(jù)分析。

這個也是筆者當(dāng)初拿到手，然后開始著手研究這個展現(xiàn)形式該如何是好。

最初筆者覺得，這個東西，不就是可以用一個列表形態(tài)來展示么。艾瑪，立馬來了一個：

▲表格形態(tài)

可是上級總是覺得這是不夠的，沒有亮點。

為了博得眼球，我只能求助于咱的D3黑科技，瞬間就感覺智商已經(jīng)不欠費了。于是，咱就有了下面的變種形態(tài)類似物：

▲pack layout

以上，很簡略的介紹了D3能干些什么，當(dāng)然，D3遠(yuǎn)遠(yuǎn)不止是單單只有這些形態(tài)，上面也說了，它的功能很強大，不怕它做不到，就怕你想不到，用在這里也是很合適的。

它有幾大優(yōu)勢：

1.適應(yīng)性高

一般的第三方組件庫，提供的API往往在很多時候，都滿足不了我們百變的需求。而我們的D3很適應(yīng)這種場合，它可以隨心所欲的盡可能的滿足我們的需求。因為它使用的是SVG，可以和HTML一樣使用CSS來進行修飾。

2.大量的布局

它可以使用變換（transformation）和濾鏡（filter）等等的動畫效果。有很多的布局，上面介紹的樹裝圖，還有餅狀、打包圖、矩陣圖等等。

3.縮放不會損失精度

SVG是可以縮放的矢量圖，D3基本是在在SVG上繪制的，所以放大縮小都不會有精度的損失。

總之，就先粗略的介紹這些吧~

作者：祝恩良，優(yōu)云軟件一只活在二次元世界的萌貨，雖然在三次元的世界賣不了一手好萌

總結(jié)

以上是生活随笔為你收集整理的高大上必备！D3.js对产品的贡献度剖析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。