d3.js 利用svg绘制水球图（d3.v3.js和d3.v5.js）

最新推荐文章于 2026-04-08 12:06:18 发布
原创 最新推荐文章于 2026-04-08 12:06:18 发布 · 1.1k 阅读 · 1
标签
#d3.js #水球图 #svg
这篇博客探讨了如何使用d3.js库的两个不同版本，d3.v3.js和d3.v5.js，来绘制水球图。作者提供了两个实例，包括各自的HTML和JavaScript代码，并且详细比较了两者之间的区别，主要集中在d3.js引用文件版本的变化上。

水球图d3.js官网有现成的例子，可以直接拿来用，只不过引用的是d3.v3.js，如果想用d3.v5.js绘制水球图，就得稍微改一下。

d3.js官网
指南->官方画廊->水球图(Liquid Fill Gauge)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
或者直接点击水球图实例

1、d3.v3.js绘制的水球图实例

index.html

<!DOCTYPE html>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
svg动态图形
05-15
随着网络的广泛应用和深入人心，XML越来越成为主流趋势。这里有个美丽svg动态图形生成
基于D3 svg的水球图
slzs_zyt的博客
07-16 2320
createCircle(){ // 创建画布 let svg = d3.select(this.$refs.testR).append("svg") // 创建svg .attr("width", 800).attr("height", 500); // 设置svg 宽高 svg.append("circle...
d3js 实现水球图
Anonymous996的博客
08-30 892
d3js 水球图 v5版本
如何快速为TensorFlow添加自定义硬件支持：可插拔设备架构完整指南
最新发布
gitblog_00059的博客
04-08 511
TensorFlow可插拔设备架构是一个革命性的功能，允许开发者在不修改TensorFlow核心代码的情况下，为TensorFlow添加对新硬件设备的支持。无论是自定义的AI加速器、新型GPU还是其他专用处理器，都可以通过插件形式无缝集成到TensorFlow生态系统中。这意味着硬件厂商和研究人员可以快速适配自己的硬件，而无需等待TensorFlow官方支持，大大加速了硬件创新和部署流程。 ##
水球图 及各种参数设置
zhuangjiajia09的专栏
02-16 1601
水球图设置
水球图
javachuxuez的博客
12-04 540
水球图详细配置 http://echarts.baidu.com/blog/2017/02/21/echarts-liquidfill-chart-tutorial.html
D3.js 中Bubble Chart详解
wan353694124的专栏
11-28 5955
Bubble Chart 今天来聊一聊美丽浪漫的气泡图~ 气泡图是一种显示三维数据的图表。 每个具有相关数据的三元组（v1，v2，v3）的实体都被绘制成一个气泡，它通过气泡的x，y位置表示了三元组中的两个vi值，而第三个通过它的大小表示。 气泡图可以被认为是散点图的变化，其中数据点被气泡代替。 正如Microsoft Office文档所解释的，“如果数据有三个数据系列，每个数据系列都包含
漏刻有时数据可视化Echarts组件开发(43)水球图svg温度计动画
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-08 621
SVG是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。具体来说，SVG图形是可伸缩的矢量图形，其图像质量不会因放大或改变尺寸而损失。在SVG中，可以创建和修改图像、对图像进行搜索和索引、对其进行脚本化或压缩。此外，SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。在创建SVG图形的过程中，可以使用各种方法来绘制路径、框、圆、文本和图形图像。例如，通过使用。
css 百分比水球 动画
ithunzi的博客
04-27 849
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *, *:before, *:after
D3.js在vue中实现水波球
weixin_42077503的博客
06-01 1064
参考：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
svg path绘制心形_如何使用 R 语言绘制水球图？
weixin_39762666的博客
11-29 331
echarts4r 包封装 Echarts Javascript 图表库，这使得我们可以使用 R 语言绘制各种基于 echarts.js 的交互式图表，今天我给大家分享的是水球图的绘制方法。首先加载我们需要的 R 包：library(echarts4r)library(tidyverse)我从 https://www.iconfont.cn 网站上下载了两个 SVG 图片，一个是 App...
极致呈现系列之：Echarts水球图的灵动魅力
九仞山的专栏
06-22 1870
详细介绍了Echarts中水球图的使用方法和技巧
C3+Svg实现水球加载动画
qq_31808873的博客
05-27 408
在下边water这个盒子里面use两次这个svg矢量图，给其设置不同的填充色，并且给它加上动画，给其中一个加上translate属性让它向右无限做位移动画，那么当两个矢量图做相对运动的时候，就会产生视觉上的欺骗，让人感觉就像水在动一样。到这儿就可以实现一个文章开头一样的数据动态变化的水球加载动画，下边贴出完整代码。当它俩做相对移动的时候，就会产生下边这种效果（通过C3动画实现）然后此处数字以及水动画的动态变化就可以通过定时器+递归来实现。此处是单独一个向右移动（下边蓝色色块是父容器的背景色）
js echarts 水球图
沧海龙腾LV的博客
04-10 3618
效果图： 1、导入js文件 echarts.js echarts-liquidfill.js 2、引入js文件到html <script type="text/javascript" src="../js/echarts.min.js"></script> <script type="text/javascript" src="../js/echart...
D3.js SVG绘图实践：波浪动画
沉淀
08-21 8398
效果图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中使用echarts实现水球图
是日前端
10-20 1万+
控制台输入安装echarts以及水球图 npm install echarts --save npm install echarts-liquidfill --save vue main.js中注册 import echarts from 'echarts' //引入echarts import 'echarts-liquidfill' 组件中使用 <template> <div class="hygrometer" ref="hygrometer"></div>
利用ECharts绘制各式酷炫水球图
小秋博客
03-24 1万+
本文来自于ECharts官方博客。 原文地址：ECharts 水球图教程 责编：陈秋歌，关注前端开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.net。 水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。先来个酷炫效果看看：效果+代码 。那么，今天我们就一起来学习一下，如何使用 ECha...
水球图（ECharts 3.4 版本）
知其白，守其黑；和其光，同其尘。
12-26 1万+
水球图是一种适合于展现单个百分比数据的图表类型第一步：引入 JavaScript 文件ECharts 的水球图是一个插件类型的图表。这意味着，在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时，需要在引入 echarts.js 之后，另外引入水球图对应的 echarts-liquidfill.js，可以在 GitHub 找到最
ECharts之水球图
热门推荐
关注最新技术问题并持续维护更新
07-25 3万+
效果图 下载 npm install echarts --save npm echarts-liquidfill echarts --save 引入并注册     在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router...
svg + d3
weixin_30471065的博客
11-02 200
为了实现元素的添加，删除，拖拽，左键点击，右键单击，悬浮等功能，使用了d3 + svg 的技术来实现界面。 最开始是采用canvas，但是由于功能原因放弃了该技术，可以看下 canvas简介 另附：canvas和svg区别 首先，下载d3.min.js和snap.svg-min.js 如果使用的是bower, 安装d3,bower --allow-root install -S d3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

uncle_Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值