老板说，最近我看滴滴打车和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