在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 相关文章推荐
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
详解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
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
Python中的推导式使用详解
2015/06/03 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Linux中如何用命令创建目录
2015/01/12 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
单身申明具结书
2015/02/26 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL