学习D3.js（一）简介

那些年丶ny
1,215 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

什么是 D3.js

  1. D3的全称是 Data-Driven Documents（数据驱动文档），是一个可以基于数据来操作文档的 JavaScript 库。简单理解就是它内部封装好了绘图指令，使用它提供的API方法传入数据，它就会在页面上绘制图表。
  2. 相对于Echats等开箱即用的可视化框架，它更接近底层。因为 D3 只生成图形语言中最基本的一些元素，如点、线、面等，不会直接提供现成的可视化图表。想要绘制一个完整的图表，需我们在它的库中使用不同的API来操作这些基本元素组合而成。
  3. 在V4版本后，D3的 API 现在已经被拆分成一个个模块，可以根据可视化需求来进行按需引入。也可以把一些模块当成工具使用，比如在绘制3D地图时，地图坐标的计算就可以使用地理类的模块来辅助开发。

模块简介

  • D3 目前已经提供了 30 多种模块，可以大致分为DOM操作类、时间处理类，数据处理类、计算类、动画类、颜色类、鼠标控制、地理类、比例调整类、图形类。
  • 前五项分类是常用的类，使用它们能满足大部分需求。
  1. D3-selection 模块 选择集，主要用于选择元素、设置属性、数据绑定、事件绑定等操作。
  2. D3-scale 模块 比列尺，提供不同类型的比例尺。
  3. D3-axis 模块 坐标轴，主要用于绘制坐标轴。一般和比例尺一起使用。
  4. d3-shape 模块 形状，提供不同的图形生成器。
  • 因为内容太多，推举直接看API文档，这里就不多说明了。

开始使用

  • 官网有CDN地址。
// 引入整个D3库。
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

// 按模块引入 @后面跟模块版本
 <script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
  • D3使用的链式结构。
  <script type="text/javascript">
    let tem = d3.selectAll('.d3')
    console.log(' tem', tem)

    tem.data(['black', 'red'])
    tem
      .style('background-color', (g) => g) // g 对应 数组中绑定的数据
      .style('width', '100px')
      .style('height', '100px')
  </script>

image.png

  1. 在HTML中有两个class为d3的元素，通过.selectAll()获取对应的元素组。
  2. 通过.data()为元素绑定数据（通过下标匹配）。
  3. 执行样式修改。执行的方法会对每个元素使用。执行过程中可以获取绑定的数据用于绘图。
  • 如果我们对绑定数据添加位置信息，在修改样式的时候应用位置信息。一个简单的绘图就完成了是不是感觉很简单。
  • D3的内容过多，且文档丰富。这里就简单的介绍下D3是什么，后面以边绘图边介绍的方式讲解。
avatar
文章
阅读
粉丝