Vue中 引入使用 D3.js
Vue中 引入使用 D3.js1. D3.js 学习文档D3.js 中文网D3.js 入门教程D3.js v5版入门教程d3.js API中文手册-【看云】d3.layout (布局)-【书栈网】2. D3.js 在 Vue 中简单应用2.1 安装 D3.jsnpm install d3 --save-dev// 或者cnpm install d3 --save-dev2.2 组件应用<te
·
Vue中 引入使用 D3.js
1. D3.js 学习文档
D3.js 中文网
D3.js 入门教程
D3.js v5版入门教程
d3.js API中文手册-【看云】
d3.layout (布局)-【书栈网】
2. D3.js 在 Vue 中简单应用
2.1 安装 D3.js
npm install d3 --save-dev
// 或者
cnpm install d3 --save-dev
2.2 组件应用
<template>
<div>
<svg width="600" height="500"></svg>
</div>
</template>
<script>
// 引入d3
import * as d3 from 'd3';
export default {
data(){
return{
data: [73,52,33,22,14,68],
}
},
methods:{
draw(){
let margin = 30; // 上下左右边距
let svg = d3.select('svg');
let width = svg.attr('width');
let height = svg.attr('height');
// 创建矩形分组
let g = svg.append('g')
.attr("transform", 'translate('+ margin +','+ margin +')'); // 图表距离视口的左、上距离
// 定义 X 轴比例尺
let scaleX = d3.scaleBand()
.domain(d3.range(this.data.length))
.rangeRound([0,width - margin*2]);
// 定义 y 轴比例尺
let scaleY = d3.scaleLinear()
.domain([0,d3.max(this.data)])
.range([height - margin * 2,0]);
// 上边距30;注意:range 后面跟的参数0,放在第二位 因为 y轴正方向向下
// 绘制 x y 轴
let axisX = d3.axisBottom(scaleX);
let axisY = d3.axisLeft(scaleY);
g.append('g').attr("transform", "translate(0, " + (height - margin * 2) + ")").call(axisX)
g.append('g').attr("transform", "translate(0,0)").call(axisY);
// 创建矩形分组
let gs = g.selectAll('rect')
.data(this.data)
.enter()
.append('g');
// 绘制矩形 + 过渡效果
let rectP = 40; // 柱状图间距
gs.append('rect')
.attr('x', function(d,i){
return scaleX(i) + rectP/2;
})
.attr('y',function(d,i){
var min = scaleY.domain()[0]; // [0, 73]
return scaleY(min);
// scaleY(0) y轴比例尺映射出来的是最大值;这个效果等同于 return height - 2*margin 的效果
})
.attr('width',function(d,i){
return scaleX.step() - rectP;
})
.attr('height',function(d,i){
return 0; // 动画初始状态为0
})
.attr('fill','pink')
.transition()
.duration(1500)
.delay(function(d,i){
return i*200 // 每个柱子逐渐开始的效果
})
.attr('y',function(d,i){
return scaleY(d)
})
.attr('height',function(d,i){
return height - margin * 2 - scaleY(d)
})
// 添加鼠标划入划出事件
gs.on("mouseover",function () {
d3.select(this.firstChild) // 这里的this是包含:rect text 的节点
.transition()
.duration(1000)
.delay(200)
.attr('fill','#306ade');
})
gs.on("mouseout",function () {
d3.select(this.firstChild)
.transition()
.duration(1000)
.delay(200)
.attr('fill','pink');
})
// 绘文字 + 过渡效果
gs.append('text')
.attr('x',function(d,i){
return scaleX(i) + rectP;
})
.attr('y',function(d,i){
return height - 2 * margin;
})
.attr('dx',function(d,i){
return -2;
})
.attr('dy',function(d,i){
return 20;
})
.text(function(d,i){
return d;
})
.attr('fill','green')
.transition()
.duration(1500)
.delay(function(d,i){
return i*200;
})
.attr('y',function(d,i){
return scaleY(d)
})
}
},
mounted(){
this.draw()
}
}
</script>
2.3 效果
1-初始界面
2-d3柱状效果图
更多推荐
已为社区贡献72条内容
所有评论(0)