在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编程起步(第六课)
Feb 27 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
图解javascript作用域链
May 27 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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 采集程序中常用的函数
2009/12/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
详解JS预解析原理
2020/06/16 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python创建系统目录的方法
2015/03/11 Python
Python3.x中自定义比较函数
2015/04/24 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python编写单元测试代码实例
2020/09/10 Python
python3 re返回形式总结
2020/11/20 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
J2EE面试题大全
2016/08/06 面试题
管理学院毕业生自荐信范文
2014/03/10 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
岗位说明书标准范本
2014/07/30 职场文书
超市周年庆活动方案
2014/08/16 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
保证书格式
2015/01/16 职场文书
婚宴新娘致辞
2015/07/28 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL