在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实现多域名不同文件的调用方法
Jan 12 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
详解Python发送邮件实例
2016/01/10 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
一看就懂得Python的math模块
2018/10/21 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
教师实习自我鉴定
2013/12/18 职场文书
个人银行贷款担保书
2014/04/01 职场文书
会计求职信范文
2014/05/24 职场文书
导游词之北京明十三陵
2019/10/28 职场文书