阅读 532

D3可视化:(2)Bar Chart with D3js

拖更了好久,最近毕业的手续办的差不多了,应该可以回来了...

系列传送门:

  1. D3可视化:(1)初次见面,SVG与D3的魅力
  2. D3可视化:(2)Bar Chart with D3js
  3. 更新中...

知识点:

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

数据读入

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

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

country,population
China,1415046
India,1354052
United States,326767
Indonesia,266795
Brazil,210868
Pakistan,200814
Nigeria,195875
Bangladesh,166368
Russia,143965
Mexico,130759
复制代码

首先将数据读入,代码如下:

const data = d3.csv('data.csv').then(data => {
    console.log(data))
})
复制代码

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

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

const data = d3.csv('data.csv').then(data => {
    data.forEach(element => {
        element.population = +element.population * 1000
    });  //处理完数据,就可以开始画图了
    render(data)
})
复制代码

画柱状图

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

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');

const render = data => {

} //根据已有数据,画图渲染的函数
复制代码

数据绑定

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

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

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

update、enter和exit

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

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

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

render函数

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

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()是一个连续域。 映射关系

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

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在比例尺设置以及使用时出现了多次,如果需要修改,又是代码中多处的重复修改。为此,对其进行一个处理,如下:

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的布局示意图,因为直接按照svgheightwidth撑满画布将导致没有多余的位置放置坐标轴等,所以这里使用一个margin来对布局重新规划。

代码如下:

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是柱状图的实际占有高度,因此,柱状图的代码可以修改为:

    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)

因此,本例中坐标轴添加可以这样:

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

增加间隙

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

    const yScale = d3.scaleBand()
        .domain(data.map(yValue))
        .range([0, innerHeight])
        .padding(0.15)   //增加了这个属性
复制代码

修改样式

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

body html{
            margin:0;
            overflow: hidden;
        }
        rect {
            fill:steelblue;
        }
        text {
            font-size: 1.1em;
        }
复制代码

最终效果

注意

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

完整代码

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

关注下面的标签,发现更多相似文章
评论