在这个用数据说话的时代（靠脸吃饭的年代），没有一个好的展现形态（没有一张帅气清秀的脸蛋），对于整个产品产生的影响，那简直...

在数据可视化竞争的战场，互联网的各家各户都很注重自家产品的前端展现。这也造成了目前前端各种火到爆，火的不要不要的原因之一。各类新型的框架也是接踵而至，如：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布局展现的一个代表形态。能很友好的展现层级关系结构的图形，非常时候用来描述组织架构这类信息的描述。

场景二