d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）

最新推荐文章于 2024-03-17 09:48:51 发布
最新推荐文章于 2024-03-17 09:48:51 发布
阅读量3.8k 收藏 27
点赞数
分类专栏： d3.js 文章标签： d3.js v5 饼状图 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjy12138/article/details/85242833
版权

实现的效果大概是这样：

实现代码如下：

<html>
	<body></body>
	<style>
		div{
			background: #F2F4FF;
			width: 100px;
			height: 40px;
			position: absolute;
			opacity: 0;
			text-align: center;
			font-size: 12px;
			line-height: 40px;
		}
	</style>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		// 数据准备
		let data = [{label: '下下等', num: 5},{label: '下等', num: 10},{label: '哈等', num: 10},{label: '和等', num: 10}, {label: '中低等', num: 38}, {label: '高等', num: 98}, {label: '哟等', num: 11}, {label: '中上等', num: 60}, {label: '中等', num: 50}, {label: '上等', num: 80}];
		let marge = {top: 0, right: 60, bottom: 60, left: 0};
		let width = 1000, height = 800;
		// 弧形生成器内、外半径
		let innerRadius = 0, outerRadius = 150;
		let svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
		let g = svg.append('g').attr('transform', 'translate(' + marge.left + ',' + marge.top  + ')');
		
		// 颜色比例尺
		let colorScale = d3.scaleOrdinal().domain(d3.range(data.length))
			.range(d3.schemeCategory10);
		// 创建饼状图
		let pie = d3.pie().value(function(d) {return d.num}).sort(null);
		
		// 创建弧形生成器
		let arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
		let arc2 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius + 30);
		// 饼状图生成器转换数据
		let pieData = pie(data);
		// 排序
		//pieData.sort(function(a, b) {
		//	return b
最低0.47元/天 解锁文章
cjy12138
关注
  • 0
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js之饼图动画
KJBU2
11-22 5232
学习D3差不多一个月了。最近看了刚看了echart，发现他里面的饼图初始化的时候是从无到有的打开一圈。所以想要模仿这个动画效果。 如果想要学习D3.js饼图布局可以去看这个网站： http://www.ourd3js.com 开始的想法是这样的：先给出饼图从无到有展开花费的所有时间，再设计饼图每个弧所占的比例，乘以动画总时间，就每个弧所要执行的时间。 在用一个delaytime变量保
d3.js绘制饼状图，悬浮出现字以及点击事件
guiplan
03-09 1093
g.on('mouseenter', (event,d) => { // 这里的d.data才是数组里的每条数据。const g = svg.selectAll(".arc") // 选择或创建类名为arc的元素。.enter().append("g") // 筛入到元素中并添加g标签。
D3.js-Tooltip:D3.js 的工具提示
06-03
#How 在 D3.js 中创建工具提示名称： Maria Cristina Di Termine类别： D3.js 框架 日期： 2015 年 5 月 工具提示是当鼠标悬停在视图的特定元素上时会出现的一条信息。 有些人用不同的名称来称呼它，例如“悬停框”、“信息提示”或“提示”，但可以肯定的是，它是显示信息的有用工具，也可以成为我们项目的时尚元素。 我想向您展示我如何在 D3.js 项目中制作工具提示。 首先，我创建了一个关于一个简单参数的通用条形图：巧克力。 我有两个值：牛奶的百分比（Y）和可可的百分比（X）。 在我的图表最后，我会得到 4 种不同口味的巧克力棒！ 我需要做的是使用名称指定哪种巧克力棒，例如“lightchoco”、“milkchoco”等。我将在我的工具提示中显示这些巧克力名称，可能还会使用额外的图片。 ##工具提示 现在我们有了条形图，我们可以创建工具提示。 为此
three.js 悬浮提示框
哈哈一笑
01-27 5126
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>di
D3.js给饼状图添加提示框
youngkl博客
10-16 7524
添加交互效果 当鼠标移动到某一块时 显示该块表示的产商的出货量 饼状图 .tooltip{ position: absolute; width: 120px; height: auto; font-family: simsun; font-size: 14px; text-align: center; colo
d3 基础折线图和饼图
weixin_30955617的博客
06-12 336
折线图 折现图可以使用svg折线元素polyline来定义一组相连的直线段，但是更推荐使用d3.line()和path元素组合使用，这样更加灵活。 d3.line()构造一个新的线生成器，使用默认的.x和.y设置x,y访问器函数。 <!DOCTYPE html> <html> <head> <meta charset="UTF...
three 悬浮提示框
Asiter的博客
12-23 5621
three 实现悬浮提示框效果 提示: 我现在这边是用的vue2.0的项目来使用的three 1.事前了解 对于悬浮提示框，官方提供了好几种做法。精灵图等做法。 而我选了CSS3DObject,把一个CSS元素转化成一个three的3D对象插入到场景中 需要用到以下的库CSS3DRenderer,CSS3DObject. CSS3DObject把一个文档dom对象转化成three可用的Object3D对象 CSS3DRenderer就是负责渲染这个CSS3DObject的渲染器 思路如下 新生成一
利用d3.js制作连线动画图与编辑器
10-16
【d3.js连线动画图制作】 在前端开发中，d3.js是一个强大的数据可视化库，可以用来创建各种复杂的图表和动画。本文将探讨如何利用d3.js制作连线动画图和编辑器，这对于数据可视化展示和交互式数据分析极具价值。 **...
D3.js实现饼状图的方法详解
10-21
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"> window.onload = function() { // ... (后续代码) }; ``` 接下来，我们创建一个SVG画布内的`g`元素，将其居中，并为其添加一个类名`main`...
悬浮提示框
03-19
源码，以封装好，下载即可使用。简单易用！
利用d3.js实现蜂巢图表带动画效果
10-16
主要给大家介绍了关于如何利用d3.js实现蜂巢图表带动画效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d3.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
d3.js 绘制心电图以及网格
03-09
d3.js 绘制心电图以及网格
D3.js实现拓扑图的示例代码
10-18
在示例代码中，通过`<script>`标签引入了`d3.v5.min.js`，这是D3.js的第五个主要版本。 2. **设置SVG容器**： 创建一个SVG元素作为图表的画布。在这个例子中，SVG元素的ID为`togo`，设置了宽高，并添加了一些样式...
D3.js制作带悬浮提示框的渐变色中国地图（使用node.js提供服务）
Eiwen的博客
04-08 2052
一.效果图 使用D3来制作中国地图主要有几个地方需要注意： 需要用到投影函数，并挂在在路径生成器上。 由于同源策略限制的原因，需要通过服务器来返回地图文件，比如china.json这种。 如果需要做渐变色渲染或者显示标注，需要额外的数据，并通过服务器返回。 要区分开topojson和geojson两种格式的数据的不同，他们的加载模式也有所不同，相对于geojson数据，topojson文件更...
【D3.js】1.19-给 D3 元素添加悬停效果
qiebzps的博客
12-02 431
【D3.js】1.19-给 D3 元素添加悬停效果为了让图形有交互的效果，可以通过CSS为元素增加悬停效果。
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现(DOM操作基本类似)
weixin_46022934的博客
07-16 3778
JS实现鼠标悬停显示二级菜单简单代码 jQuery实现实现图片(效果图) 代码在最下面 实现图片(效果图) 代码在最下面 这是开始的一个标签---->鼠标移动到(div上弹出来下拉菜单) 就成功出现了 简单的代码如下(横向菜单以及竖向菜单,自己可以用table或者浮动解决问题): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http
推荐一款实用的D3.js提示插件-d3-tip
最新发布
gitblog_00038的博客
03-17 410
推荐一款实用的D3.js提示插件-d3-tip 如果你正在使用D3.js进行数据可视化，并且希望为你的图表添加友好的提示信息，那么d3-tip可能是一个值得你尝试的选择。 项目简介 d3-tip是一款轻量级的D3.js提示插件，它可以帮助你在鼠标悬停在图表元素上时显示相关的提示信息，让用户更好地理解和探索你的数据可视化作品。 功能特性 易于集成：d3-tip通过简单的API调用即可实现与D3.j...
D3.js交互式提示框组件
Dax1_的博客
12-22 1318
一般来说，图表中不宜存在过多文字。但是，有时需要一些文字来描述某些图形元素。那么，可以实现一种交互：当用户鼠标滑到某图形元素时，出现一个提示框，里面写有描述文字。这是一种简单、普遍的交互式，几乎适用于所有图表。通过可给提示框定制外观，能给用户带来很好的体验。 1. 提示框的制作思路 提示框，就是“文字”加“边框”。显示文字，一般来说用 SVG 的<text>，但是，有两个问题： 如果字符串过长，&l...
D3.js使用异步加载地图数据
06-07
异步加载地图数据可以提高页面加载速度和渲染效率，D3.js提供了多种方式实现异步加载地图数据，以下是一种常用方式的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>中国地图</title> <style> svg { width: 100%; height: 100%; } .province { fill: #ccc; stroke: #fff; stroke-width: 1px; } .city { fill: #f00; stroke: #fff; stroke-width: 1px; } </style> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="map"></svg> <script> // 创建地图容器 var svg = d3.select("#map"); var width = svg.node().getBoundingClientRect().width; var height = svg.node().getBoundingClientRect().height; // 定义投影 var projection = d3.geoMercator() .center([105, 38]) .scale(600) .translate([width / 2, height / 2]); // 定义路径生成器 var path = d3.geoPath() .projection(projection); // 异步加载省份数据 d3.json("provinces.json").then(function(provinces) { // 绘制省份 svg.selectAll(".province") .data(provinces.features) .enter() .append("path") .attr("class", "province") .attr("d", path); }); // 异步加载城市数据 d3.json("cities.json").then(function(cities) { // 绘制城市 svg.selectAll(".city") .data(cities.features) .enter() .append("circle") .attr("class", "city") .attr("cx", function(d) { return projection(d.geometry.coordinates)[0]; }) .attr("cy", function(d) { return projection(d.geometry.coordinates)[1]; }) .attr("r", 5); }); </script> </body> </html> ``` 该示例代码中使用了D3.js的Promise机制实现异步加载地图数据。通过`d3.json()`方法异步加载JSON格式的地图数据，然后在`then()`回调函数中绘制地图。由于异步加载是并行进行的，因此可以提高地图绘制效率。需要注意的是，在异步加载过程中需要进行错误处理，确保地图数据加载成功并正确解析。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值