D3.js实战系列1--认识selections

发表于 分类于 阅读次数： 本文字数： 621 阅读时长 ≈ 2 分钟

D3 名称的由来是 Data-Driven Documents，数据驱动文档。D3.js 是一个 JavaScript 库，支持基于数据操作文档。通过使用 HTML、SVG 和 CSS 能够让数据有效的展示。D3 强调 web 标准，提供了全部现代浏览器的能力而不需要我们受限于框架，为操作 DOM 提供了结合了强大的可视化组件和数据驱动的方案。

D3 允许将任意数据绑定到 DOM，然后基于数据高效操作文档，具有开销小、速度快，支持大型数据集以及交互和动画的动态行为。

本文是笔者了解 D3 的第一步，同时也会介绍 D3 的一个核心 API：selections。

使用 W3C DOM API 修改文档非常繁琐，特别是如果是操作一组节点，通常我们会使用如 document.getElementByTagName(‘div’)的方式获取到节点集，然后通过循环统一修改节点的 style 或者其他属性。

D3 中采用声明方法，运行于被称为 selections 的任意节点集，如：d3.selectAll(“div”).style(“color”,’red’)

Selections 允许对文档对象模型(DOM)进行强大的数据驱动转换：设置 attributes、styles、properties、HTML、或者 text 等。通过使用 data join 中的 enter 和 exit selections，我们也可以根据绑定的数据添加或者移除节点元素。官方 Selections API Reference戳此进。

d3-selection 提供了一个 d3.select()方法，其实可以对标原生的 document.querySelector()。d3.selectAll()方法可以对标原生的 document.querySelectorAll()。通过调用 select 或者 selectAll 后，生成的内置 d3 对象也提供了可以进行链式调用的针对节点的操作方法，常见的如下：

  • 处理 dom 属性：attr，classed，style，property
  • 处理 dom 内容：text，html
  • 操作 dom 节点：append，remove，insert
  • 处理事件：on，dispatch，pointer

下面是一个简单的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let svg1 = d3
  .select('#canvas')
  .append('svg')
  .attr('width', '100px')
  .attr('height', '100px')
  .append('rect')
  .attr('x', 50)
  .attr('y', 50)
  .attr('width', 50)
  .attr('height', 50)
  .style('fill', 'red')
  .on('mouseover', function (d, i) {
    svg1.style('fill', 'blue');
  })
  .on('mouseout', function (d, i) {
    svg1.style('fill', 'red');
  });

这样我们就能成功生成一个 svg，其含有一个长宽为 50px 的矩形，填充色为红色，且在鼠标移入的同时能够改变填充色为蓝色，移出后恢复。

好了，我们已经向 D3.js 迈出第一步了，初次接触可能会无从入手，但是不要紧D3 官网提供了很多文档、示例，一起探索 D3 吧~