在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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
生日邀请函范文
2014/01/13 职场文书
承诺书格式
2014/06/03 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2014年保卫工作总结
2014/12/05 职场文书
三下乡个人总结
2015/03/04 职场文书
消防宣传语大全
2015/07/13 职场文书
运动会通讯稿300字
2015/07/20 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
python源码剖析之PyObject详解
2021/05/18 Python