梦入琼楼寒有月,行过石树冻无烟

D3 简介

D3(Data-Driven Document)即数据驱动文档,是一个主要用于数据可视化所开发的javascript库,启动主要是数据决定绘图流程以及程序设计模型。或者另一个称呼为“事件驱动 ——由用户动作来决定程序流程的设计模型”。在版本控制中,D3主要使用了语义话版本控制,格式为主板本号.次版本号.修订号 即:

  1. 主版本号:做了不兼容的API修改
  2. 次版本号:当你做了向下兼容的功能增加
  3. 修订号:当你做了向下兼容的问题修正。

数据与DOM的绑定

同样的,在WEB中数据可视化中不仅仅只有D3,还有不少的类似与:Highcharts、Echarts、Chart。当然除此之外还有维度更高的,如蚂蚁空间地理可视化框架,D3 能够将数据与DOM对象进行绑定,使得数据与图形为一体,我们当修改DOM的时候,数据自然而然的会进行更新,这意味着我们配合各种各样的语言来呈现不同的数据展示。

计算和绘图的独立

在D3中数据变成一个数据图表将会被分为两个步骤为计算绘图,在Highcharts等框架中,计算和绘图shingle整体,并输入数据。而D3中数据与绘图是进行分开的,而计算内所做的就是计算所得到的节点或坐标绘图则是渲染图表。

支持 SVG 与 Canvas

在 D3 中,SVG与Canvas中通常会出现在不同的环境中,如地图中的飞线图,都可以使用SVG或Canvas路径以及SVG动画进行实现,在3.X之前的版本主要支持SVG,但从4.X开始也支持 Canvas。

数据可视化

数据可视化即Data Visualization,起源与18世纪,在19世纪中叶时期,数据可视化主要被运用与军事用途没来表示军队的死亡以及分布当中。而进入20世纪,由于大数据以及移动互联网的飞速发展,数据可视化也会运用在产品分析、行为分析以及数据统计等场景中。

图标的分类及用途

柱形图


柱形图是最为常见的,也是最容易理解的一个图表,使用柱形图的长短可以表示数据的大小,或者需要表现随着时间变化,数据的大小等。如果将柱形图的x或y轴进行一环,的可以得到一个横向的柱状图,也被称之为条形图

散点图


散点图使用三维数据集,将其中的二维数据分别对应到x和y轴,之后将第三维用点来作为表示。

折线图


折线图的目的与柱状图类似,适合在二维的数据集中,某一维相对另一维度的变化趋势,不哦那个的是折线图适合连续的数据,柱状图适合较为离散的数据,折线图也适用一些数量较大的数据而住装图适合少量的数据。

饼状图


饼状图可以用于表述数值的大小,缺点就是数值之间的差距不大,基本上通过饼状图的颜色以及注释来进行分辨,因此饼状图一般用于表示一个值站总体的百分比。

弦图


弦图用于表示点与点之间的联系,两点之间的连线来表示那个点具有联系以及线的粗细表示权重。

力导向图


力导向图适合描述打来那个节点之间的关系,各个节点之间具有相互的作用里来表示节点之间的用线相连,而相连的定点表示具有一定的关系,适合用于任务关系以及力导向图等。

树图


树图用于表示层级、上下级以及包含与被包含的关系,与之类似的还有集群图等。

⬅️ Go back