数据可视化 D3.js 简介

·  阅读 1039
数据可视化 D3.js 简介

这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战


系列文章可以查看《数据可视化》专栏


参考

D3 开发者创建了一个在线数据可视化开发环境 Observable,它类似于 Jupyter NoteBook,将代码分成一个个 cell,可以按 cell 执行代码,便于一边编写代码一边执行调试,将数据分析和可视化结合在一起。而且它还提供类似于 Github 的 folk 功能,可以复用祂人的代码。

💡 更多关于 Observable 的介绍可以看这篇文章

而且它还是一个可视化作品分享社区,除了可以浏览官方制作的样例,在里面还可以找到很多其他开发者的优秀可视化作品


D3.js 全称为 Data-Driven Documents 是一个基于数据来操作 DOM 的 JS 库。

它可以将几乎任意数据绑定到 DOM 文档对象模型上,然后根据数据来计算对应 DOM 的属性值,以「驱动」DOM 变化。

💡 这和 JS 框架 Vue 有异曲同工之妙

特点

它十分灵活,这是因为 D3 只生成图形语言中最基本、最底层的一些元素,如点、线、面,开发者可以根据所需,利用这些基本图形元素自由地搭建出各种具体的图表。

它不是一个框架,因此没有在代码编写和操作 DOM 元素的诸多限制。它遵循现有的 Web 标准,可以与现代浏览器所所提供的各种技术,如 HTML、CSS、SVG 以及 Canvas 结合使用,以更好地展示数据。

可以在这里查看官方实现的各种可视化案例:

它的运行速度很快,支持操作大数据集。使用 D3 实现各种有趣的动画,以协助讲述数据背后的故事;还可以为数据可视化提供动态交互,鼓励用户进行数据探索:

它广受欢迎,可以查看 D3 的 Github 仓库中 star 数量和自 2015 年来 D3 在 npm 中的每日下载量。官方和社区开发者提供大量针对各种场景的可视化组件,例如官方提供超过 30 多种模块,可以方便地构建各种复杂的可视化图表。

💡 D3 5+ 版本支持现代浏览器,而 D3 4 版本可以支持 IE 9+,更旧版本的 D3 可以支持更旧的浏览器。

💡 D3 由于提供了众多模块,入门上手有一定的难度而且,而且生成的都是基本的图形元素,自由度虽然很高,但搭建出完整的图表所需的代码量较大。如果希望基于数据快速生成常见的统计图表,可以使用一些封装程度更高的工具,例如 D3 团队推出的另一款工具 Observable Plot,或 另一个开源的可视化工具 Vega-Lite

开发环境

有多种方法在项目中引入 D3 库

  • 官网Github 将源码下载到本地,再在项目中引入本地 JavaScript 文件

  • 通过包管理工具,以模块形式引入项目

    先在终端输入以下命令安装 D3.js 及其依赖包

    # for npm
    npm install d3 --save
    
    # for yarn
    yarn add d3 --save
    复制代码

    在项目中导入 D3.js

    <script type="module">
    // 导入 D3.js 的所有模块
    import * as d3 from "d3";
    // 使用 d3 选中页面的所有 div 元素
    const div = d3.selectAll("div");
    </script>
    复制代码
  • 通过 CDN 引入(注意引用的版本号),可以使用官网提供的源

    <script src="https://d3js.org/d3.v7.js"></script>
    
    <!-- minified version -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    复制代码

    💡 也可以使用其他服务商,如 jsDelivrCDNJSunpkg 提供的源

D3 由各模块构成,可以根据项目所需单独引入 d3 中的某些模块,比如单独使用 d3-selection:

  • 使用 CDN 导入
<script src="https://d3js.org/d3-selection.v3.js"></script>
复制代码
  • 使用打包工具进行构建时
// 在项目中载入 D3 scale 模块的 scaleLinear 函数
import {scaleLinear} from "d3-scale";
复制代码

💡 D3 也可以在 Node 和 web workers 环境中运行。但在 Node 环境中需要提供自己创建的 DOM,例如使用 JSDOM

// 在 Nodejs 环境中引入 D3
const d3 = require("d3");
复制代码

也可以导入多个模块,然后使用 Object.assign 将这些模块整合到名为 d3 的对象中

const d3 = Object.assign({},
    require("d3-format"),
    require("d3-geo"),
    require("d3-geo-projection"));
复制代码
分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改