v4.x 版本-柱状图
代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。
demo实现效果图如下:
实现代码如下:(包含关键代码注释)
<template>
<div class="hello">
</div>
</template>
<script>
const d3 = require("d3");
// import * as d3 from "d3"
export default {
name: 'HelloWorld',
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
mounted: function() {
this.$nextTick(function() {
var dataset = [20, 40, 60, 80, 100]; //数据都是自定义
var width = 400;
var height = 400;
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px dashed #ccc");
var padding = { left: 30, right: 30, top: 20, bottom: 20 };
var grap = 10;
var xScale = d3 //x轴比例尺
.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width - padding.left - padding.right]);
var yScale = d3 //y轴比例尺
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([width - padding.top - padding.bottom,0]);
//x轴
var gAxis = svg
.append("g")
.attr(
"transform",
"translate(" + padding.left + "," + (height - padding.bottom) + ")"
)
.call(d3.axisBottom(xScale));
//y轴
var gYxis = svg
.append("g")
.attr(
"transform",
"translate(" + padding.left + "," + padding.top + ")"
)
.call(d3.axisLeft(yScale));
//柱形图
var rect = svg
.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "steelblue")
.attr("x", function(d, i) {
return xScale(i) + grap / 2;
})
// .attr("y", function(d, i) { //这种方式和下面直接用比例尺的方式一样。
// return yScale(d);
// })
.attr("y", yScale)
.attr(
"transform",
"translate(" + padding.left + "," + padding.bottom + ")"
)
.attr("width", xScale.step() - grap)
.attr("height", function(d, i) {
return height - padding.top - padding.bottom - yScale(d);
});
//图形标注
var texts = svg
.selectAll("MyText")
.data(dataset)
.enter()
.append("text")
.attr("class", "MyText")
.attr("fill", "white")
.attr(
"transform",
"translate(" + padding.left + "," + padding.top + ")"
)
.attr("x", function(d, i) {
return xScale(i) ;
})
.attr("y", function(d, i) {
return yScale(d);
})
.attr("dx", function() {
return (xScale.bandwidth()-grap) / 2; //V4版本
// return (xScale.step() - grap) / 2; //V4版本
//step() 和 bandwidth()都表示坐标两点间的距离
})
.attr("dy", function() {
return "2em";
})
.text(function(d) {
return d;
});
});
}
,beforeDestroy:function(){
this.$service()
}
};
</script>
<style scoped>
.chart rect {
fill: steelblue;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: middle;
}
</style>