在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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
原生js 秒表实现代码
Jul 24 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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恢复数组的key为数字序列的方法
2015/04/28 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
vue+element+Java实现批量删除功能
2019/04/08 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python中文字符串截取问题
2015/06/15 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
会计实习自我鉴定
2013/12/04 职场文书
物流创业计划书
2014/02/01 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
法制工作总结2015
2015/07/23 职场文书
导游词之襄阳古城
2019/09/27 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
sql注入报错之注入原理实例解析
2022/06/10 MySQL