第二章——vue、d3进阶之第一个图表

1、柱形图表效果

代码：

2、添加比例尺（线性比例尺）

之前使用的都是以值作为矩形的长度，但如果值过大或太小豆不在适合了，所以就需要使用比例尺

效果图

添加的代码

let datas = [2.5, 2.1, 1.7, 1.3, 0.9];//改变之前的data数据
let min = d3.min(datas);//最大
let max = d3.max(datas);//最小
let linear = d3.scaleLinear()//此处与用html写法不同,在htnl中是d3.scale.linear()
               .domain([min,max])
               .range([0,250]);

同时修改矩形的宽度返回值

.attr("width",function(d){//矩形的宽度，这里直接使用的数据的值
          // return d;
          return linear(d);
        })

3、添加序数比例尺

效果图

添加的代码

let color = ['red' ,'blue', 'green', 'yellow', 'white']
//序数比例尺
let ordinal = d3.scaleOrdinal()
                .domain(datas)
                .range(color)

同时修改矩形的颜色“”fill

.attr("fill",function(d) {
          return ordinal(d);
        })//矩形的颜色

4、添加坐标轴

效果图

代码如下