在Vue项目中使用d3.js的实例代码
作者:归去来兮-不如去兮 时间:2024-05-11 09:13:56
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js
最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用
首先安装
npm install d3 --save-dev
以防万一,然后看package.json
安装完成
在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现一个简单的折线图:
<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
name: 'non-vue-line-chart',
template: '<div></div>',
mounted() {
const svg = d3.select(this.$el)
.append('svg')
.attr('width', 500)
.attr('height', 270)
.append('g')
.attr('transform', 'translate(0, 10)');
const x = d3.scaleLinear().range([0, 430]);
const y = d3.scaleLinear().range([210, 0]);
d3.axisLeft().scale(x);
d3.axisTop().scale(y);
x.domain(d3.extent(data, (d, i) => i));
y.domain([0, d3.max(data, d => d)]);
const createPath = d3.line()
.x((d, i) => x(i))
.y(d => y(d));
svg.append('path').attr('d', createPath(data));
},
};
</script>
<style lang="sass">
svg
margin: 25px;
path
fill: none
stroke: #76BF8A
stroke-width: 3px
</style>
代码简单易懂,但这仅仅是一个基本的例子。因为我们没有使用模板,所以需要更多操作和计算的更复杂的可视化会掩盖组件的设计和逻辑。上述方法的另一个警告是,我们不能使用scopedCSS 的属性,因为D3会动态地向DOM添加元素。
可以使用比较奇怪,但是代码比较优雅的方式去实现
<template>
<svg width="500" height="270">
<g style="transform: translate(0, 10px)">
<path :d="line" />
</g>
</svg>
</template>
<script>
import * as d3 from 'd3';
export default {
name: 'vue-line-chart',
data() {
return {
data: [99, 71, 78, 25, 36, 92],
line: '',
};
},
mounted() {
this.calculatePath();
},
methods: {
getScales() {
const x = d3.scaleTime().range([0, 430]);
const y = d3.scaleLinear().range([210, 0]);
d3.axisLeft().scale(x);
d3.axisBottom().scale(y);
x.domain(d3.extent(this.data, (d, i) => i));
y.domain([0, d3.max(this.data, d => d)]);
return { x, y };
},
calculatePath() {
const scale = this.getScales();
const path = d3.line()
.x((d, i) => scale.x(i))
.y(d => scale.y(d));
this.line = path(this.data);
},
},
};
</script>
<style lang="sass" scoped>
svg
margin: 25px;
path
fill: none
stroke: #76BF8A
stroke-width: 3px
</style>
非常酷,即使它没有公开任何属性并且数据是硬编码的,它很好地将视图从逻辑中分离出来,并且使用Vue钩子,方法和data对象,现象和上图一样的。
总结
以上所述是小编给大家介绍的在Vue项目中使用d3.js的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://www.cnblogs.com/wuvkcyan/archive/2018/04/30/8975105.html
标签:Vue,d3.js
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用JS实现轮播图效果(二)
2024-06-05 09:11:49
![](https://img.aspxhome.com/file/2023/4/123384_0s.jpg)
利用python绘制正态分布曲线
2021-04-09 06:59:40
![](https://img.aspxhome.com/file/2023/3/70253_0s.png)
Python2.x版本中基本的中文编码问题解决
2021-01-06 14:02:16
nodejs 的 session 简单使用
2024-05-11 09:51:19
单页面vue引入百度统计的使用方法示例详解
2024-05-11 09:14:23
![](https://img.aspxhome.com/file/2023/3/126503_0s.png)
Go语言使用Etcd实现分布式锁
2024-04-23 09:37:33
![](https://img.aspxhome.com/file/2023/9/134399_0s.webp)
Python代码块及缓存机制原理详解
2023-07-02 08:12:07
VSCode 格式化缩进代码的实现
2023-01-22 15:22:49
![](https://img.aspxhome.com/file/2023/1/114681_0s.png)
随Linux开机自动启动mysql
2009-12-29 10:14:00
Python计算一个点到所有点的欧式距离实现方法
2023-03-29 21:19:11
详解vue-cli 脚手架 安装
2024-05-09 10:40:06
![](https://img.aspxhome.com/file/2023/2/126642_0s.png)
MySQL用户和权限及破解root口令的方法示例
2024-01-23 23:12:16
CentOS 7下MySQL服务启动失败的快速解决方法
2024-01-13 16:33:34
关联的 script 标签
2009-11-02 10:40:00
Python正则表达式分组概念与用法详解
2022-02-12 08:41:25
Python3中的f-Strings增强版字符串格式化方法
2022-07-07 12:34:36
Go语言编程学习golang配置golint
2024-05-13 10:40:52
![](https://img.aspxhome.com/file/2023/8/125118_0s.png)
python网页请求urllib2模块简单封装代码
2021-07-31 02:03:55
Python安装官方whl包和tar.gz包的方法(推荐)
2022-04-27 05:37:47
深入理解NumPy简明教程---数组3(组合)
2023-07-15 06:22:39