d3js绘制y坐标轴_用d3js创建一个简单的矩形图

用d3js创建一个简单的矩形

前言

本文并不是针对初学者的教程， 而是对矩形图绘制的基本流程做一个总结， 整理一下d3的基本工作流程.

正文

用d3创建矩形图一般分为下面几个步骤

flow.png

bar_chart_1.png

[图片上传失败...(image-61825a-1543910014177)]

通过这几个步骤就可以创建出一个完整的矩形图， 接下来我们从具体代码，一步步看看要如何

生成数据源

为了显示方便， 我们先生成一些测试数据， 我们先定义数据格式为26个字母以及他们的值, 比如{'key': 'A', 'value': 65}

var i = 0;

sampleData = new Array(26).fill(undefined).map(function(){

i += 1;

return {

key: String.fromCharCode(64+i),

value: Math.random()*80+10

}

})