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柱状效果图

Vue中引入使用 D3.js相关推荐

vue中引入外部文件js、css、img的方法
第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import ...
vue中引入js，然后new js里的方法
阿里云Web播放器Web端使用SDK说明:https://help.aliyun.com/document_detail/51991.html?spm=5176.11065259.1996646101 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...
vue中引入第三方js
vue中常遇到第三方js,简单粗暴的可以直接在html页面中引入cdn. 或者在 webpack.base.conf.js 中进行配置. module.exports = {entry: {track ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...

Vue中引入使用 D3.js

Vue中引入使用 D3.js

1. D3.js 学习文档

2. D3.js 在 Vue 中简单应用

Vue中引入使用 D3.js相关推荐

最新文章

热门文章

Vue中 引入使用 D3.js

Vue中 引入使用 D3.js

1. D3.js 学习文档

2. D3.js 在 Vue 中简单应用

Vue中 引入使用 D3.js相关推荐

最新文章

热门文章

Vue中引入使用 D3.js

Vue中引入使用 D3.js

Vue中引入使用 D3.js相关推荐