1、柱形图表效果
代码:
<template>
<div id="mydiv">
<svg>
<rect></rect>
</svg>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
mounted(){
this.getlist();
},
methods:{
getlist(){
let datas = [250,210,170,130,90]
let width = 300;
let height = 300;
//制作画布
let svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
let rectHeight = 25;//定义每个矩形的高度
svg.style("background-color","black")
svg.selectAll("rect")
.data(datas)
.enter()
.append("rect")
.attr("x",20)//生成的图形距离画布左侧20px
.attr("y",function(d,i){//生成的图形距离画布顶部20px
return i*rectHeight;
})
.attr("width",function(d){//矩形的宽度,这里直接使用的数据的值
return d;
})
.attr("height",rectHeight-2)//矩形的高度
.attr("fill","steelblue")//矩形的颜色
},
},
};
</script>
<style lang="sass" scoped>
</style>
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、添加坐标轴
效果图
代码如下
<template>
<div id="mydiv">
<svg>
<rect></rect>
<!-- <g>
<g>
<line></line>
<text></text>
</g>
<path></path>
</g> -->
</svg>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
mounted() {
this.getlist();
},
created() {
// this.getlinear();
},
methods: {
// getlinear(){},
getlist() {
let datas = [2.5, 2.1, 1.7, 1.3, 0.9];
let min = d3.min(datas);
let max = d3.max(datas);
//线性比例尺
let linear = d3
.scaleLinear() //此处与用html写法不同
.domain([0, max])//[min,max]此处如果写min的话,那最小值就是min,所以最好不要写min不然最小值在图中就无法显示出来
.range([0, 250]);
//轴
let axis = d3.axisBottom(linear).ticks(7);//在vue中的使用方法与html不一样
// d3.svg.axis()
// .scale(linear)//指定比例尺
// .orient("bottom")//指定刻度的方向
// .ticks(7);//指定刻度的数量
let width = 300;
let height = 300;
//制作画布
let svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//在svg画布中添加坐标轴
svg
.append("g")
.attr("class", "axis") //定义类名
.attr("transform", "translate(10,130)") //坐标轴位置
.call(axis);
// axis(svg.append("g").attr("transform","translate(10,130)"));//也可以使用这个添加坐标轴
let rectHeight = 25; //定义每个矩形的高度
// svg.style("background-color","black")//画布背景色
svg
.selectAll("rect")
.data(datas)
.enter()
.append("rect")
.attr("x", 20) //生成的图形距离画布左侧20px
.attr("y", function(d, i) {
//生成的图形距离画布顶部20px
return i * rectHeight;
})
.attr("width", function(d) {
//矩形的宽度,这里直接使用的数据的值
// return d;
return linear(d);
})
.attr("height", rectHeight - 2) //矩形的高度
.attr("fill", "red"); //矩形的颜色
}
}
};
</script>
<style scoped>
</style>