d3和echart_D3.js开发数据可视化，性能⽅⾯和
highcharts,echart。。。
⼲巴巴的对⽐可读性并不⾼，也很难让⼈有真实对⽐的联想。我以我们⼯作中遇到的⼀个需求来对⽐讲解。以下，GO~
---
svg canvas
我是岂安科技前端架构师静~，也许很多⼈都会觉得奇怪，在我们这样⼀个更多以后台数据分析为主的公司，为什么需要⼀个专注于前端的团队？在我们的项⽬中是如何实现数据可视化的呢？下⾯以这样⼀个需求开始我们的讲解：我们需要向⽤户展⽰⽬前⽤户产品的风险情况，有没有风险产⽣、产⽣于何地、是否被拦截等信息。
最终效果图：
技术选型
说到数据可视化，可谓是百花齐放，⼀时之间前端界出现了琳琅满⽬的第三⽅库： Highcharts ， Echarts ， Chart.js ， D3.js 等。但是，万变不离其宗。
总的来说，所有的第三⽅库都是基于这两种浏览器图形渲染技术实现的： Canvas 和 SVG 。
通过各种⽐较之后，我们最终选择基于 D3.js 进⾏开发。
为什么不选⽤更加丰富的图形库，⽐如 Echarts ？
——数据可视化看似简单，但其中蕴含的科学可谓博⼤精深。
Echarts 提供的图表的确可以满⾜⼤部分的需求，遵循了数据可视化的⼀些经典范式。然⽽，每个不同的⾏业对于数据可视化都会有⼀些定制化的需求，希望能以⼀些带有⾏业特征的图表向使⽤者展⽰数据背后隐藏的秘密。
因此，我们希望可以使⽤⼀个⽐较基础的图形库，这个库对⼀些基础算法进⾏了封装。然后在此基础之上，我们可以进⾏⼆次开发，定制适合的图表向⽤户展⽰更有针对性的数据。
为什么不选⽤基于 Canvas 的库？
——我们的应⽤存在⼤量的⽤户交互场景。
在 Canvas 中，如果要为细粒度的元素添加事件处理器，必须涉及到边缘检测算法，⽆疑为开发带来
了⼀定的难度，同时，采⽤这种⽅法并不⼀定精确。相⽐之下，SVG 是基于 DOM 操作的，⽀持更精确的⽤户交互，⽆疑更适合我们这样⼀个⼩规模的团队。
所谓成也萧何败萧何。这⾥的萧何源于 SVG 是基于 DOM 操作的。
众所周知，频繁的 DOM 操作⼗分消耗性能。对于⽤户体验的影响便是可能出现闪烁、卡顿等现象。幸好，伟⼤的前端界对于这个问题已经有了解决⽅案： Virtual DOM 技术。
所以我们要做的，就是选择⼀个⽀持 Virtual Dom 技术的框架与 D3.js 结合使⽤。同时，我们的最终⽬标是将这些图标封装成可复⽤的组件。
因此，最终我们选择了 facebook 出品的 React 。这是⼀个相对轻量、简单、专注于 View 的库。
实际问题
细⼼的读者⼀定会提出这样⼀个问题：既然是⼀个实时数据展⽰图表，如何做到如此频繁且流畅地渲染⼤量数据？其实很简单，关键在于把握以下两个阶段：
1. 数据的获取
在这⾥，我们主要还是采⽤了客户端主动轮询拉取的⽅式。只要选定了采样频率，剩下的就是每隔⼀段时间从服务器拉取数据了。
当然，这种⽅式的缺点也显⽽易见：由于延时造成的数据滞后，并且随着时间的推移，这种滞后会越来越严重。
为了解决这⼀问题，我们会在⼀段时间之后进⾏数据实时性的校正。
2. 数据的渲染
需求中，攻击情况需要依据时间顺序进⾏展⽰，表现为⼀条从攻击源到攻击⽬标的运动轨迹。如果⼀段时间内产⽣了⼤量的攻击，那么页⾯中的 DOM 元素会迅速增加，渲染速度变慢，出现卡顿现象。
为了解决这⼀问题，当每⼀条运动轨迹展⽰完毕的时候，相应的 DOM 元素会被及时销毁。当更⼤量的攻击产⽣时，我们会控制展⽰的数量，同时发出警告，因为这明显已经属于⼀种攻击⾮常极端的情况了。
未来展望
事实上，对于实时数据的处理，前⽂所述的⽅法并不是最佳实践，只能说是⼀种降级⽅案。我们的长远⽬标是要做到真正的实时数据展⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。