当前位置:   article > 正文

【D3.js】D3是什么_什么是 d3.js

什么是 d3.js

D3是什么

D3 的全称是 Data-Driven Document,可以理解为:由数据来决定绘图流程的程序设计模型。

D3 是一个JavaScript的函数库,是用来做数据可视化的。

将数据变成图形,要想用原生的 HTML、SVG、Canvas 来实现是烦琐和困难的。D3 为我们封装好这些,让开发者能更注重图表的布局和逻辑。

D3 的优势

  JavaScript 的前端可视化库,除了 D3 外还有不少:Highcharts、Echarts、Chart.js。它们可以看作一类的,共同特点是封装层次很高,能够非常简单地制作图表,但是给予开发者控制和设计的空间很少。封装层次太高自然会失去部分自由,但太低又会使程序过长,D3 在这一点上取得了平衡。

D3 的特性

  1. 数据与元素捆绑的特性
    D3 能够将数据与 DOM 绑定在一起,使数据与图形称为一个整体。
  2. 计算和绘图相互独立的特性
    将数据变成图表,可分为两步:计算和绘图
    在 D3 里,计算和绘图是分开的。在可视化的设计比较复杂时,计算和绘图分开易于调整和操作细节。
  3. 链式语法
  4. 强大的图形计算能力
  5. 同时支持SVG和Canvas
    SVG 和 Canvas 是 HTML5 用于绘图的元素,分别用于绘制矢量图和标量图,各自有自己的适用领域。D3 3.x 以前是以 SVG 为基础的,主要提供 SVG 的绘图能力。从 4.x 开始支持 Canvas。

相关概念

  数据可视化 和 信息可视化 很相近,有时几乎可以等同。但严格来说它们是不同的:

  • 数据可视化是对数字信息进行可视化
  • 信息可视化是对数字信息和非数字信息进行可视化

图表种类

  1. 柱形图
  2. 散点图
  3. 折线图
  4. 饼状图
  5. 弦图
    弦图 用于表示节点之间的联系。两点之间的连线表示哪两个节点具有联系,线的粗细表示权重。
  6. 力导向图
    力导向图 适合描述大量节点之间的关系,各节点之间具有相互作用力。各节点之间用线相连,相连的顶点表示具有一定的关系。实际应用时可以赋予节点和连线实际的意义,做成人物关系图、力导向图等。
  7. 树图
    树图 用于表示层级、上下级、包含于被包含关系,与之类似的还有集群图。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/529262
推荐阅读
相关标签
  

闽ICP备14008679号