
- DC.js 教程
- DC.js - 首页
- DC.js - 介绍
- DC.js - 安装
- DC.js - 概念
- Crossfilter 简介
- D3.js 简介
- DC.js - Mixins
- DC.js - baseMixin
- DC.js - capMixin
- DC.js - colorMixin
- DC.js - marginMixin
- DC.js - coordinateGridMixin
- DC.js - 饼图
- DC.js - 线图
- DC.js - 条形图
- DC.js - 组合图
- DC.js - 系列图
- DC.js - 散点图
- DC.js - 气泡图
- DC.js - 热力图
- DC.js - 数据计数
- DC.js - 数据表
- DC.js - 数据网格
- DC.js - 图例
- DC.js - 仪表板工作示例
- DC.js 有用资源
- DC.js - 快速指南
- DC.js - 有用资源
- DC.js - 讨论
DC.js - D3.js 简介
D3.js 是一个 JavaScript 库,用于在浏览器中创建交互式可视化。D3 库允许我们在数据集的上下文中操作网页元素。这些元素可以是 HTML、SVG 或 Canvas 元素,并且可以根据数据集的内容进行引入、删除或编辑。它是一个用于操作 DOM 对象的库。D3.js 可以成为数据探索的有价值的辅助工具。它使您可以控制数据的表示方式,并允许您添加数据交互性。
与其他库相比,D3.js 是首屈一指的框架之一。这是因为;它适用于 Web 和数据可视化,并且具有企业级水平。另一个原因是它具有极大的灵活性,使全球开发人员能够创建许多高级图表。此外,它在很大程度上扩展了其功能。
让我们了解 D3.js 的基本概念,如下所示:
- 选择
- 数据连接
- SVG
- 过渡
- 动画
- D3.js API
让我们详细了解每个概念。
选择
选择是 D3.js 中的核心概念之一。它基于 CSS 选择器概念。那些已经使用并了解 JQuery 的人可以很容易地理解选择。它使我们能够根据 CSS 选择器选择 DOM,然后提供修改或追加和删除 DOM 元素的选项。
数据连接
数据连接是 D3.js 中的另一个重要概念。它与选择一起工作,使我们能够根据数据集(一系列数值)操作 HTML 文档。默认情况下,D3.js 在其方法中优先考虑数据集,并且数据集中每个项目都对应一个 HTML 元素。
SVG
SVG 代表**可缩放矢量图形**。SVG 是一种基于 XML 的矢量图形格式。它提供绘制不同形状的选项,例如线条、矩形、圆形、椭圆形等。因此,使用 SVG 设计可视化效果可以为您提供更多功能和灵活性。
变换
SVG 提供了转换单个 SVG 形状元素或一组 SVG 元素的选项。SVG 变换支持平移、缩放、旋转和倾斜。
过渡
过渡是项目从一种状态更改为另一种状态的过程。D3.js 提供了一个 transition() 方法在 HTML 页面中执行过渡。
动画
D3.js 通过过渡支持动画。动画可以通过正确使用过渡来完成。过渡是关键帧动画的一种有限形式,只有两个关键帧:**开始**和**结束**。起始关键帧通常是 DOM 的当前状态,结束关键帧是您指定的属性、样式和其他属性集。过渡非常适合过渡到新视图,而无需依赖起始视图的复杂代码。
D3.js API
让我们简要了解一些重要的 D3.js API 方法。
集合 API
集合只是一个将多个元素组合成一个单元的对象。它也称为容器。它包含对象、映射、集合和嵌套。
路径 API
路径用于绘制矩形、圆形、椭圆形、折线、多边形、直线和曲线。SVG 路径表示可以描边、填充、用作剪裁路径或所有三种组合的形状轮廓。
轴 API
D3.js 提供了绘制轴的功能。轴由线条、刻度和标签组成。轴使用比例尺,因此每个轴都需要赋予一个比例尺才能使用。
缩放 API
缩放有助于缩放内容。您可以使用点击和拖动方法专注于特定区域。
分隔符分隔值 API
分隔符是由一个或多个字符组成的序列,用于指定纯文本或其他数据中独立区域之间的边界。字段分隔符是逗号分隔值的序列。简而言之,分隔符分隔值是逗号分隔值 (CSV) 或制表符分隔值 (TSV)。