可视化D3教程-快速开始

发表于 | 更新于 | 分类于 ， | 评论数： | 阅读次数：
本文字数： 2.5k | 阅读时长 ≈ 2 分钟

最近想开个可视化的坑，就看到了 D3 , 别问为什么不选择echarts、Highcharts之类的，老夫写代码就看star数最多的……
D3 的全称是（Data-Driven Documents）, D3 将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。
咋一看d3首页 被其凌乱的文档折服了 差点就完成了就入门到放弃，于是做个学习过程记录，帮助一起入门d3的大家^_^

本文快速上手先来画出这样一个图形：

迫于只会 React 之后的代码里可能会出现 react相关知识，但是只会vue的同学不用着急 重点相关的都是 d3 ，都可以看得懂得啦~ 废话不多说，让我们快速上手d3吧。

引入d3

引入d3的方式很多，我是用create-react-app创建示例工程，所以这里用npm引入

1
2
3
4
5
npm install d3
//安装后得到的d3版本 之后都会依据这个版本做示例： "d3": "^5.7.0",
//d3 4/5 版本之间的API会略有不同
//然后在js文件中
import * as d3 from 'd3'

准备根视图和数据

1
2
3
4
//之后会在这里加入画布
<div id="graph" />
//本次最后会画出一个“柱状图”，简单准备下这样的数据源
let data = [2500, 2100, 1700, 1300, 900]

设置画布

1
2
3
4
5
//在之前准备的div下插入svg
let svg = d3.select("#graph") // d3.select()：是选择所有指定元素的第一个
    .append("svg")//获取到画布
    .attr("width", 500)//设置宽度
    .attr("height", 500);//设置高度

D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。

SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，可将 SVG 文本直接嵌入 HTML 中显示。

SVG 有如下特点：

  • SVG 绘制的是矢量图，因此对图像进行放大不会失真。
  • 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
  • 每个图形均视为对象，更改对象的属性，图形也会改变。
  • 不适合游戏应用。

设置比例尺

为什么要设置比例尺？直接使用输入的数值当成矩形的长度 如果数值过大或过小 可能画布没有这么大，或者根本看不见。

1
2
3
let linear = d3.scaleLinear()//返回线性比例尺
    .domain([0, 2500])// 0-2500 映射到 0-100
    .range([0, 250]);//这里0 2500对应输入数据的最小最大值

画出矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 添加了与 data 数组的长度相同数量的矩形
svg.selectAll("rect")   //选择svg内所有的矩形
    .data(this.props.data)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素 rect表示矩形
    //设置各个矩形的坐标和长宽
    .attr("x", 25) //每个矩形的x坐标
    .attr("y", (d, i) => i * 40) //每个矩形的y坐标
    //将比例尺应用到width
    .attr("width", (d, i) => {
        console.log("{d,i}", { d, i })
        console.log("linear(d)", linear(d))
        return linear(d);
        })
    .attr("height", 25)
    //设置颜色
    .attr("fill", "#66ccff");

画出坐标轴

1
2
3
4
5
6
7
8
9
10
11
12
13
let g = svg.append("g");
    //设置x轴
    g.append("g")//定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 <g>，再将坐标轴的其他元素添加到这个 <g> 里即可
        .attr("transform", "translate(25,0)")//坐标轴的位置，可以通过 transform 属性来设定。
        .call(
            d3.axisBottom(linear)//axisBottom表示刻度向下的坐标轴
            .ticks(5)//刻度的数量
        );
    //设置y轴
    // 	svg.append("g").call(axis); 等价于  axis(svg.append(g));
    g.append("g")
        .attr("transform", "translate(25,0)")
        .call(d3.axisLeft(linear).ticks(0))

最后

看到这里或许你会对 react/g 、 x/y/width/height/fill 以及 svg坐标系产生好奇,这里就推荐 MDN 的文档了 :

完整代码 ： QuickStart.js

在线演示 ： 可视化学习-quick-start