D3.js在vue中实现水波球

最新推荐文章于 2024-03-20 23:58:16 发布
最新推荐文章于 2024-03-20 23:58:16 发布
阅读量876 收藏 3
点赞数
分类专栏： 前端学习 文章标签： d3.js javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42077503/article/details/106455949
版权

参考：https://www.cnblogs.com/flashing-magic/p/11776365.html
https://blog.csdn.net/slzs_zyt/article/details/81068783
https://blog.csdn.net/code_for_free/article/details/52268686
来康康效果图叭

在这里插入图片描述
外面的圆环就是用两个圆套在一起，这没什么好说的
可以把这个水波球看成一个八卦图，上面一半，下面一半
首先要做一个水波clipPath裁剪层（就是八卦图的上面一部分），然后写两个text，一个深蓝一个淡蓝，然后用.attr('clip-path', 'url(#clipPath2)')裁剪成两部分，注意裁剪层是不显示颜色的。
所以我们还要再添加一个蓝色的水波。
这里值得一提的是svg的堆叠顺序是

  • 同级：后面的添加的元素会覆盖前面添加的元素
  • 不同级：层级更高的会被覆盖

这里有点坑，我的蓝色的水波明明是在text前面添加，可是在浏览器里显示text在水波的前面，导致我的水波会把文字给盖住！所以我有新建了一个qswl（气死我了）层，在这一层里面添加了水波。这样就不会覆盖住我的文字了。
附上代码：

<template>
  <div class="hello">
    <router-link to="/">柱状图</router-link><br/>
    <router-link to="lineChart">折现图</router-link><br/>
    <router-link to="pieChart">饼状图</router-link><br/>
    <div class="chart">
      <h3>任务二</h3>
      <svg ref="tast2" class="tast2">
        <svg ref="ground">
        </svg>
      </svg>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
export default {
  name: 'tast2',
  methods: {
    draw () {
      var svg = d3.select(this.$refs.tast2)
        .attr('width', 600)
        .attr('height', 550)
      svg.append('circle')
        .attr('fill', '#34a7f5')
        .attr('r', 100) // 半径
        .attr('cx', 200) // x轴位置
        .attr('cy', 200) // y轴位置
      svg.append('circle')
        .attr('fill', '#ffffff')
        .attr('r', 93) // 半径
        .attr('cx', 200) // x轴位置
        .attr('cy', 200) // y轴位置
      /* ------------动画部分------------ */
      var height = 600
      var values = 0
      var dataList0 = [values - 12, values - 18, values - 24, values - 18, values - 12, values - 6, values, values - 6]
      var dataList1 = [values - 18, values - 24, values - 18, values - 12, values - 6, values, values - 6, values - 12]
      var dataList2 = [values - 24, values - 18, values - 12, values - 6, values, values - 6, values - 12, values - 18]
      var dataList3 = [values - 18, values - 12, values - 6, values, values - 6, values - 12, values - 18, values - 24]
      var dataList4 = [values - 12, values - 6, values, values - 6, values - 12, values - 18, values - 24, values - 18]
      var dataList5 = [values - 6, values, values - 6, values - 12, values - 18, values - 24, values - 18, values - 12]
      var dataList6 = [values, values - 6, values - 12, values - 18, values - 24, values - 18, values - 12, values - 6]
      var dataList7 = [values - 6, values - 12, values - 18, values - 24, values - 18, values - 12, values - 6, values]
      var dataList01 = [values + 12, values + 18, values + 24, values + 18, values + 12, values + 6, values, values + 6]
      var dataList11 = [values + 18, values + 24, values + 18, values + 12, values + 6, values, values + 6, values + 12]
      var dataList21 = [values + 24, values + 18, values + 12, values + 6, values, values + 6, values + 12, values + 18]
      var dataList31 = [values + 18, values + 12, values + 6, values, values + 6, values + 12, values + 18, values + 24]
      var dataList41 = [values + 12, values + 6, values, values + 6, values + 12, values + 18, values + 24, values + 18]
      var dataList51 = [values + 6, values, values + 6, values + 12, values + 18, values + 24, values + 18, values + 12]
      var dataList61 = [values, values + 6, values + 12, values + 18, values + 24, values + 18, values + 12, values + 6]
      var dataList71 = [values + 6, values + 12, values + 18, values + 24, values + 18, values + 12, values + 6, values]
      var areaPath = d3.area()
        .x(function (d, i) { return i * 50 })
        .y0(function (d, i) { return height / 2 })
        .y1(function (d, i) { return -d })
        .curve(d3.curveBasis)
      svg.append('defs')
        .append('clipPath') // 裁剪图层
        .attr('id', 'clipPath')
        .append('circle')
        .attr('r', 86) // 半径
        .attr('cx', 100) // x轴位置
        .attr('cy', 20) // y轴位置
      svg.append('defs')
        .append('clipPath') // 裁剪图层
        .attr('id', 'clipPath1')
        .append('circle')
        .attr('r', 86) // 半径
        .attr('cx', 100) // x轴位置
        .attr('cy', -20) // y轴位置
      /* ---------------上面的裁剪层--------------- */
      svg.append('defs')
        .append('clipPath') // 裁剪图层
        .attr('id', 'clipPath2')
      var clipPath2 = d3.select('#clipPath2')
      function run1 () {
        clipPath2.append('path')
          .attr('class', 'path1')
          .attr('width', 600)
          .attr('d', areaPath(dataList01))
          .attr('fill', 'rgba(255, 255, 255, 1)')
          .attr('transform', 'rotate(180, 150, 90)')
          .attr('clip-path', 'url(#clipPath1)')

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList71))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList61))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList51))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList41))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList31))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList21))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList11))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList01))

          .remove()
          .on('end', run1)
      }
      requestAnimationFrame(run1)
      /* -------------------波浪-------------------- */
      var qswl = svg.append('svg')
      function wave () {
        qswl.append('path')
          .attr('class', 'path')
          .attr('width', 600)
          .attr('d', areaPath(dataList0))
          .attr('fill', 'rgba(52, 167, 245, 1)')
          .attr('transform', 'translate(100,180)')
          .attr('clip-path', 'url(#clipPath)')

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList1))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList2))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList3))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList4))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList5))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList6))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList7))

          .transition().duration(100).delay(0).ease(d3.easeLinear)
          .attr('d', areaPath(dataList0))

          .remove()
          .on('end', wave)
      }
      requestAnimationFrame(wave)
      /* ---------------添加文字--------------- */
      svg.append('text')
        .attr('x', 150)
        .attr('y', 220)
        .style('fill', '#c3e2fe')
        .style('font-size', '50px')
        .style('font-weight', 'bold')
        .text('55%')
      svg.append('text')
        .attr('x', 150)
        .attr('y', 220)
        .style('fill', '#31618e')
        .style('font-size', '50px')
        .style('font-weight', 'bold')
        .text('55%')
        .attr('clip-path', 'url(#clipPath2)')
      var ground = d3.select(this.$refs.ground)
      ground.append('rect')
        .attr('width', 300)
        .attr('height', 300)
        .attr('fill', '#ecf9fc')
        .attr('transform', 'translate(50,50)')
      ground.append('text')
        .attr('x', 65)
        .attr('y', 85)
        .style('fill', '#000000')
        .style('font-size', '25px')
        .style('font-weight', 'nomal')
        .text('Liquid Fill Gauge')
      ground.append('rect')
        .attr('width', 200)
        .attr('height', 200)
        .attr('fill', '#ffffff')
        .attr('transform', 'translate(100,100)')
    }
  },
  mounted () {
    this.draw()
  }
}
</script>

<style scoped>
.chart {
    margin-left: 100px;
    margin-top: -80px;
  }
.tast2 {
    width: 600px;
    height: 550px;
    /* -webkit-transform: rotate(180deg) */
}
</style>
魈傩
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js SVG绘图实践：波浪动画
沉淀
08-21 8080
效果图TALK IS CHEAP源码就50多行，比较好看懂。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>svg动画</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg i
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：...
动态波浪效果threejs-waves
07-19
jquery实现动态波浪效果threejs-waves，随鼠标滑动而动
d3js 实现水球图
Anonymous996的博客
08-30 552
d3js 水球图 v5版本
基于Vue.js和D3.js的智能停车可视化系统
最新发布
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
03-20 1041
本文将介绍如何使用Vue.js和D3.js构建一个智能停车可视化系统，帮助用户快速了解停车场的车位情况。
svg波浪动态效果代码
ICode联盟
09-28 152
svg波浪动态效果代码，集合gsap.js实现的波浪效果。
vue3 + threejs 实现仿iView官网大波浪特效
sea9528的博客
12-15 4025
一、效果图 先上最终效果图： 具体效果可参考iview官方界面iView - 一套高质量的UI组件库 大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org) 二、代码 1.安装threejs npm install --save three 2.代码（复制可用） components文件夹新建组件waves.vue，直接复制代码如下，可直接运行： <template> <di
技术分享：用JS实现的3D海浪涌动特效
w2sft的博客
02-23 1052
分享一个基于ThreeJS的3D海浪涌动特效，效果如下： 常可用于页面背景，3D效果，视觉观感很好，海浪会随机涌动，科幻感、技术感强烈。 代码说明 代码会引用ThreeJS库，版本号为56。注：必须是此版本。 页面背景色可在Body的style中自行调节。 <body style="background:#000000"> 完整源码如下，直接保存为html文件即可使用。 也可对源码优化修改，以实现更好效果，如果不想修改后的源码泄露出去，可用JShaman对JS代码进行加
前端canvas绘制水波球
CHengYuP的博客
03-25 441
效果如下图 代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf8"> <title>水波</title> <style type="text/css"> * { padding: 0; margin: 0; border: 0; } html, body { height: 100%; width
vue中使用echarts-liquidfill实现水球图
风如也的博客
10-21 7505
先看效果图 echarts-liquidfill查看官方文档 安装 npm install echarts --save npm install echarts-liquidfill --save vue main.js 中注册 import echarts from 'echarts' //引入echarts import 'echarts-liquidfill' 组件中使用 <template> <div style="width:400px;height:400px;" r
vue3实现水球图
weixin_45486168的博客
01-18 1737
水球图实现的方式有很多种，譬如： a.通过canvas 的sin 绘制水波实现 b.通过canvas的贝塞尔曲线实现水波 c.通过echarts的echarts-liquidfill水球图插件实现 canvas手写水球图确实也不难，只不过效果没有使用echarts-liquidfill插件的好，而且echarts-liquidfill插件更高效 具体效果如图： 上代码： <template> <div class="water-wave"> <div ref="l
G2Plot水波图在vue项目中的实现
m0_60257268的博客
11-16 2576
由于工作需要要实现水波图，大概的效果就是如下 里面的水波是动态的，在网上找了很久才找到G2Plot有这样的图例 第一次使用G2Plot,有很多不知道地方，还有vue的知识不够充实，所以写下了这篇本人对G2Plot水波图在vue项目中的实现，其中还是有好多不足的地方，望谅解 首先给G2Plot的官方链接，里面有很多的教程，我这不再过多的解释 G2Plot 开箱即用的图表库 | AntV ...
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之...4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
使用D3.js+Vue实现一个简单的柱形图
10-18
主要介绍了使用D3.js+Vue实现一个简单的柱形图,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
在Vue项目中使用d3.js的实例代码
11-29
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 ...
vue在npm run dev运行项目时出现npm ERR! code ELIFECYCLE问题解决方案
weixin_42077503的博客
02-01 5235
今天准备开始一个新项目，于是用vue-cli创建了一个项目，可是当npm run dev时报错： 解决方法： 第一步：npm uninstall webpack-dev-server 第二步：npm install [email protected] 第三步：npm run dev 这是项目已经跑起来了，当你看到可爱的百分比数字逐渐增长时，不要高兴太早，他还会报错： 解决方法： np...
echarts饼状图引导线左右对称渐变、引导线上文字左右对齐（Vue实现）
weixin_42077503的博客
01-11 4044
效果图： 大致思路： 平时看echart是官网的例子大多数都是在option里面直接添加属性，但是如果想要达到每一条数据的样式都不一样采用这种方式是无法实现的。 其实可以通过series.data等于一个属性的对象来实现。 提示:该demo数据最多8条 option： var option = { tooltip: {}, series: [ { type: 'pie', radius: [45, 75]
踩坑记录：vue使用debounce函数
weixin_42077503的博客
03-25 3255
正确写法： <template> <h-page-container> <el-button @click="handleClick()">点我</el-button> </h-page-container> </template> <script> import { debounce } from './common.js' export default { name: 'Hello', dat
d3.js在vue里实现树形结构曲线连接
06-01
下面是一个使用d3.js在Vue中实现树形结构曲线连接的示例： 1. 安装d3.js 使用npm安装d3.js: ``` npm install d3 ``` 2. 在Vue组件中导入d3.js 在Vue组件的`<script>`标签中导入d3.js： ``` import * as d3 from 'd3'; ``` 3. 在Vue组件中定义一个SVG元素 在Vue组件中定义一个SVG元素，用于绘制树形结构： ``` <template> <svg ref="svg"></svg> </template> ``` 4. 在Vue组件的mounted钩子函数中使用d3.js绘制树形结构 在Vue组件的mounted钩子函数中使用d3.js绘制树形结构： ``` <script> export default { mounted() { const svg = d3.select(this.$refs.svg); const width = 500; const height = 500; const treeData = { name: 'A', children: [ { name: 'B', children: [ { name: 'C' }, { name: 'D' } ] }, { name: 'E', children: [ { name: 'F' }, { name: 'G' } ] } ] }; const treeLayout = d3.tree() .size([width, height]); const rootNode = d3.hierarchy(treeData); treeLayout(rootNode); const link = svg.selectAll('.link') .data(rootNode.links()) .enter() .append('path') .attr('class', 'link') .attr('d', d => { return `M${d.source.x},${d.source.y}C${d.source.x},${(d.source.y + d.target.y) / 2} ${d.target.x},${(d.source.y + d.target.y) / 2} ${d.target.x},${d.target.y}`; }); const node = svg.selectAll('.node') .data(rootNode.descendants()) .enter() .append('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x},${d.y})`); node.append('circle') .attr('r', 5); node.append('text') .attr('x', 10) .attr('y', -10) .text(d => d.data.name); } } </script> ``` 这段代码首先定义了一个SVG元素，然后使用d3.tree()创建一个树形布局，再使用d3.hierarchy()创建一个层次结构。接着使用selectAll()创建节点和链接，使用enter()添加节点和链接，然后使用attr()设置样式和属性。最后使用path元素绘制贝塞尔曲线连接节点。 上面的代码可以画出一个简单的树形结构，你可以根据自己的需求修改数据和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值