D3可视化：（2）Bar Chart with D3js

发表于 | 更新于 | 评论数：
5.5k | 10 分钟

最终效果图

知识点：

  • d3数据绑定
  • 柱状图画法
  • 坐标轴
  • 比例尺

数据读入

数据可视化的第一步还是数据读取，在d3中可以使用d3.csv非常方便的读取数据，它会返回一个Promise对象。

csv文件是以逗号,分隔的数据内容，本地使用的csv数据如下,文件名为data.csv：

1
2
3
4
5
6
7
8
9
10
11
country,population
China,1415046
India,1354052
United States,326767
Indonesia,266795
Brazil,210868
Pakistan,200814
Nigeria,195875
Bangladesh,166368
Russia,143965
Mexico,130759

首先将数据读入，代码如下：

1
2
3
const data = d3.csv('data.csv').then(data => {
    console.log(data))
})

可以看到，控制台输出了一个数组，数组中的每条数据均是一个对象，类型为{country:xx, population:xx}

当然，人数自然应该是Number类型的，同时，为了将人数转换为单位个，将所有数据都扩大一千倍，即：

1
2
3
4
5
6
const data = d3.csv('data.csv').then(data => {
    data.forEach(element => {
        element.population = +element.population * 1000
    });  //处理完数据，就可以开始画图了
    render(data)
})

画柱状图

HTML文件与上一节相同，都是仅包含了一个<svg></svg>标签，首先选择svg:

1
2
3
4
5
6
7
const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');

const render = data => {

} //根据已有数据，画图渲染的函数

数据绑定

将数据绑定到DOM上，是D3最大的特色。d3.select与d3.selectAll返回选择集，但其本身是没有数据的，通过data()函数，可以将数据与之绑定。相关函数有两个：

  • selection.datum([value])
    选择集上的每个元素都绑定相同的元素value
  • selection.data(values[,key])
    选择集上每一个元素分别绑定数组values的每一项，key是一个键函数，用于指定绑定数组时的规则。

datum用比较少，这里主要用到的是data()，将已处理好的数据绑定在dom上。

update、enter和exit

在进行数据绑定的时候，不一定数据和元素个数就是相同的，这个时候就需要一个动态的处理，这就需要用到updata、enter、和exit了。

  • update() 当对应的元素正好满足时 （ 绑定数据数量 = 对应元素 ）
    实际上并不存在这样一个函数，只是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但对应元素正好满足时，直接操作即可，后面直接跟 text ，style 等操作即可。
  • enter() 当对应的元素不足时 （ 绑定数据数量 > 对应元素 ）
    当对应的元素不足时，通常要添加元素，使之与绑定数据的数量相等。后面通常先跟 append 操作。
  • exit() 当对应的元素过多时 （ 绑定数据数量 < 对应元素 ）
    当对应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。

本项目主要用到了enter，因为页面中只有svg标签，我们需要做的是根据数据内容，在svg中画<rect>来表示柱状图。
理解 Update、Enter、Exit

render函数

有了以上的概念，就可以开始画图了

1
2
3
4
5
6
const render = data => {
    svg.selectAll('rect').data(data)  //选择`rect`并绑定数据data，但这个时候没有元素，因此使用enter
        .enter().append('rect')
        .attr('width',width)
        .attr('height','30px')
}

这样更新视图，就可以看到已经有图像出来了。但是只能看到一个黑色的长方形。因为目前图形并不能反映任何数据，只是单纯的固定’width’的长方形。为此，需要用上数据，但是因为数据可能很大或者很小，为了让其能够正好显示的视图中，需要使用到比例尺。

比例尺

D3中有很多比例尺，本例中主要使用到了线性比例尺(scaleLinear)和序数比例尺(scaleBand)

线性比例尺可以将domain的内容线性映射到range的一个范围内，这样，就可以保证无论初始数值多大或多小，都能够很好的适应画当前视图。
映射关系：

序数比例尺不是一个连续的比例尺，domain()中使用一个数组，range()是一个连续域。
映射关系：

因此，加上两个方向的比例尺，让柱状图的雏形开始慢慢出现吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const render = data => {
    const xScale = d3.scaleLinear()
        .domain([0,d3.max(data, d => d.population)])
        .range([0,width]) //最大值将视图空间充满
    const yScale = d3.scaleBand()
        .domain(data.map(d => d.country))
        .range([0,height])

    svg.selectAll('rect').data(data)  //选择`rect`并绑定数据data，但这个时候没有元素，因此使用enter
        .enter().append('rect')
        .attr('y',d => yScale(d.country))
        .attr('width',d => xScale(d.population)) //宽度根据数据
        .attr('height',yScale.bandwidth()) //高度由比例尺自动生成
}

这样子，就有一个雏形了，效果如下：

代码优化

首先，重新审视下代码，发现其中d => d.population以及d => d.country在比例尺设置以及使用时出现了多次，如果需要修改，又是代码中多处的重复修改。为此，对其进行一个处理，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const render = data => {
    const xValue = d => d.population; //优化
    const yValue = d => d.country;  //优化

    const xScale = d3.scaleLinear()
        .domain([0,d3.max(data,xValue)]) //优化
        .range([0,width]) 
    const yScale = d3.scaleBand()
        .domain(data.map(yValue))  //优化
        .range([0,height])

    svg.selectAll('rect').data(data) 
        .enter().append('rect')
        .attr('y',d => yScale(yValue(d)))   //优化
        .attr('width',d => xScale(xValue(d))) //优化
        .attr('height',yScale.bandwidth())

坐标轴

使用margin来优化布局

下图所示是margin的布局示意图，因为直接按照svg的height和width撑满画布将导致没有多余的位置放置坐标轴等，所以这里使用一个margin来对布局重新规划。

代码如下：

1
2
3
const margin = {left:50,top:10,right:20,bottom:30};
const innerHeight = height - margin.top - margin.bottom;
const innerWidth = width - margin.left - margin.right;

其中innerHeight和innerWidth是柱状图的实际占有高度，因此，柱状图的代码可以修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
const xScale = d3.scaleLinear()
    .domain([0, d3.max(data,xValue)])
    .range([0, innerWidth]) //将 width 改为 innerWidth
const yScale = d3.scaleBand()
    .domain(data.map(yValue))
    .range([0, innerHeight]) //将height 改为 innerHeight
const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`) //加入新元素g,整体移动maring.left和margin.top
g.selectAll('rect').data(data)  
    .enter().append('rect')
    .attr('y',d => yScale(yValue(d)))
    .attr('width', d => xScale(xValue(d)))
    .attr('height',yScale.bandwidth())

增加坐标轴

坐标轴的绘制，是d3通过<svg>中的<path> <text> <line>实现的，用到的函数如axisLeft axisBottom等，绘制一般分为一下几个步骤：

  • 创建坐标轴
    var axisX = d3.axisLeft(xScale)根据比例尺创建坐标轴
  • 创建新的<g>组
    var gAxis = svg.append('g')
  • 插入坐标轴
    axisX(gAxis) 或者 在上一步直接svg.append('g').call(axisX)

因此，本例中坐标轴添加可以这样：

1
2
3
g.append('g').call(d3.axisLeft(yScale)); //左边显示country
g.append('g').call(d3.axisBottom(xScale))
    .attr('transform',`translate(0,${innerHeight})`) //虽然是bottom，但是默认位置并不在下，需要移动至下方

增加间隙

现在柱状图还是很丑的状态，应该增加一点间隙，让它看起来更加美观，这就非常简单了，在yScale上使用padding属性。

1
2
3
4
const yScale = d3.scaleBand()
    .domain(data.map(yValue))
    .range([0, innerHeight])
    .padding(0.15)   //增加了这个属性

修改样式

为了让柱状图看起来更美观，增加一些css样式，样式如下：

1
2
3
4
5
6
7
8
9
10
body html{
            margin:0;
            overflow: hidden;
        }
        rect {
            fill:steelblue;
        }
        text {
            font-size: 1.1em;
        }

注意

由于chrome的安全原因限制，在本地使用d3.csv读取本地文件时是会遇到问题的，并不支持file//: 读取内容。 因此，代码在github中是可以正常运转，但是本地可能无法正常运作， 可以开一个本地服务器，将代码放置上。

完整代码

完整代码详见：d3系列教程源码

0%