在Vue项目中使用d3.js的实例代码


Posted in Javascript onMay 01, 2018

之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js

最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用

首先安装

npm install d3 --save-dev

以防万一,然后看package.json

在Vue项目中使用d3.js的实例代码

安装完成

在我们开始之前,让我们渲染一个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添加元素。

在Vue项目中使用d3.js的实例代码

可以使用比较奇怪,但是代码比较优雅的方式去实现

<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的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
详解redux异步操作实践
Aug 15 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 #Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 #Javascript
JS实现的缓冲运动效果示例
Apr 30 #Javascript
Vue波纹按钮组件制作
Apr 30 #Javascript
学习JS中的DOM节点以及操作
Apr 30 #Javascript
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
You might like
咖啡语言
2021/03/03 咖啡文化
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python GUI编程完整示例
2019/04/04 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
女性时尚在线:IVRose
2019/02/23 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python