【D3.js 学习记录】——icicle冰锥图,sunburst光晕图数据可视化

2023-10-17 15:19

本文主要是介绍【D3.js 学习记录】——icicle冰锥图,sunburst光晕图数据可视化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

冰锥图可视化

矩形冰锥图

d3.partition()官方文档

用来生成邻接图:一个节点链接树图的空间填充变体。与使用连线链接节点与父节点不同,在这个布局中节点会被绘制为一个区域(可以是弧也可以是矩形),并且其位置反应了其在层次结构中的相对位置。节点的尺寸被编码为一个可度量的维度,这个在节点-链接图中很难表示。

d3.partition().size()

返回一个函数,会把传入函数的数据划分成一个个区域,一般情况下使用方法为:

d3.json('./data/games.json').then( data => {root = d3.partition().size([height,width])(d3.hierarchy(data).sum(d => d.popularity).sort((a,b) => {return b.popularity - a.popularity}));
});
代码理解
  • sum:每个节点的高度都由它的子节点的高度求和决定的。那么如何求和是由我们来告诉d3.js的。如:给非叶子结点的树形赋值为子节点
结果

在这里插入图片描述

做data join的时候,直接用 红框内的数据即可,绘制矩形和文本的时候都需要

  • x0,y0 : 矩形左上角的点
  • x1,y1 : 矩形右下角的点

绘制区域代码

//绘制矩形区域代码
g.selectAll('datarect').data(data.descendants()).join('rect').attr('class', 'datarect' ).attr('fill', fill ).attr('x',d => d.y0 ).attr('y', d => d.x0).attr('height', d => d.x1 - d.x0).attr('width',  d => d.y1 -d.y0);//绘制文本代码
g.selectAll('.datatext').data(data.descendants()).join('text') .attr('class', 'datatext').attr('x', d => (d.y0 + d.y1)/2).attr('y', d => (d.x0 + d.x1)/2).attr('text-anchor', 'middle').text(d => d.data.name);

结果

在这里插入图片描述

问题

这种类型的冰锥图需要滑动网页查看,非常不方便,因此考虑将冰锥图掰成一圈,更加方便查看
在这里插入图片描述


Sunburst(光晕图)

数据预处理

  • 和冰锥图一样,依然是使用partition()这个接口,但是size应该要改变一下。
  • 画path时,设置d属性使用d3.arc()由于要画出环状的冰锥图,他用的是极坐标,需要注意的是,d3中默认的极坐标系0度是竖直向上的
  • Size放入的数组中包含两个元素,一个是角度 θ,一个是长度ρ
d3.json('./data/games.json').then( data => {root = d3.partition().size([2 * Math.PI, height / 1.6])(d3.hierarchy(data).sum(d => d.popularity).sort((a, b) => b.popularity - a.popularity));

size为布局指定大小

  • 若是直角坐标系就传入width和height;
  • 若是极坐标系就传入θ和ρ的最大值;(注意,这里的θ用的是弧长,不是角度

绘制path(扇形区域)

const arc = d3.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.innerRadius(d => d.y0)
.outerRadius(d => d.y1)
// .padAngle()//startAngle:起始角度
//endAngle: 终止角度
//innerRadius:起始半径
//outerRadius:终止半径color = d3.scaleOrdinal(d3.schemeCategory10)
g.selectAll('.datapath').data(data.descendants().filter(d => d.depth>0)).join('path').attr('calss', 'datapath').attr('d', arc ).attr('fill',fill )

绘制文本

g.selectAll('.datatext').data(data.descendants().filter(d => d.depth>0)).join('text').attr('class', 'datatext').attr('transform', d =>{let x = (d.x0 + d.x1) / 2 * 180 /Math.PI; let y = (d.y0 + d.y1) / 2 ;//data中使用的是弧度制(x,y表示弧度),但是rotate()使用的是角度制,因此这里需要人为进行一步转换(*180/Math.PI)return `rotate(${x-90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`          
}).attr('text-anchor', 'middle').text(d => d.data.name)
  • 注意:translate里面的函数执行时绝对有序的,rotate旋转的时候会连带着坐标轴一起旋转
  • text默认的0度是水平向右的,而d3中默认的0度是水平向上的,因此在rotate里面还是要减去90
  • 左半边的文本需要再转一下,让文字变正,因此在translate里面还要加上一个rotate,让左半边的文字旋转180度变正

矩形冰锥图icicle 可视化代码

<!DOCTYPE html>
<html><head><title>Icicle</title><script src="./js/d3.min.js"></script><meta charset="utf-8"></head><body><svg width="1000" height="3000" id="mainsvg" class="svgs" style="display: block; margin: auto;"></svg><script>const svg = d3.select('#mainsvg');const width = +svg.attr('width');const height = +svg.attr('height');const g = svg.append('g')//.attr('transform', `translate(${width/2}, ${height/2})`);let root;const fill = d => {if( d.depth == 0 ){//根节点return color(d.data.name);}while (d.depth >1 ){//不是第二层d = d.parent;}return color(d.data.name)};const render = function(data){color = d3.scaleOrdinal(d3.schemeCategory10);g.selectAll('datarect').data(data.descendants()).join('rect').attr('class', 'datarect' ).attr('fill', fill ).attr('x',d => d.y0 ).attr('y', d => d.x0).attr('height', d => d.x1 - d.x0).attr('width',  d => d.y1 -d.y0);g.selectAll('.datatext').data(data.descendants()).join('text')   .attr('class', 'datatext').attr('x', d => (d.y0 + d.y1)/2).attr('y', d => (d.x0 + d.x1)/2).attr('text-anchor', 'middle').text(d => d.data.name);}d3.json('./data/games.json').then( data => {root = d3.partition().size([height,width])(d3.hierarchy(data).sum(d => d.popularity).sort((a,b) => {return b.popularity - a.popularity}));render(root)});</script></body>
</html>

可视化效果

在这里插入图片描述

光晕图Sunburst可视化代码(用到了极坐标轴)

<!DOCTYPE html>
<html><head><title>SunBurst</title><script src="./js/d3.min.js"></script></head><body><svg width="1600" height="940" id="mainsvg" class="svgs" style="display: block; margin: auto;"></svg><script>const svg = d3.select('#mainsvg');const width = +svg.attr('width');const height = +svg.attr('height');svg.attr("viewBox", [0, 0, width, height]);const g = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`);let root;const arc = d3.arc().startAngle(d => d.x0).endAngle(d => d.x1).innerRadius(d => d.y0).outerRadius(d => d.y1)// .padAngle()const fill = d => { while (d.depth > 1) d = d.parent; return color(d.data.name); };const render = function(data){color = d3.scaleOrdinal(d3.schemeCategory10)g.selectAll('.datapath').data(data.descendants().filter(d => d.depth>0)).join('path').attr('calss', 'datapath').attr('d', arc ).attr('fill',fill )g.selectAll('.datatext').data(data.descendants().filter(d => d.depth>0)).join('text').attr('class', 'datatext').attr('transform', d =>{let x = (d.x0 + d.x1) / 2 * 180 /Math.PI; let y = (d.y0 + d.y1) / 2 ;//data中使用的是弧度制(x,y表示弧度),但是rotate()使用的是角度制,因此这里需要人为进行一步转换(*180/Math.PI)return `rotate(${x-90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`          }).attr('text-anchor', 'middle').text(d => d.data.name)//注意:translate里面的函数执行时绝对有序的,rotate旋转的时候会连带着坐标轴一起旋转//text默认的0度是水平向右的,而d3中默认的0度是水平向上的,因此在rotate里面还是要减去90//左半边的文本需要再转一下,让文字变正,因此在translate里面还要加上一个rotate,让左半边的文字旋转180度变正}d3.json('./data/games.json').then( data => {root = d3.partition().size([2 * Math.PI, height / 1.6])(d3.hierarchy(data).sum(d => d.popularity).sort((a, b) => b.popularity - a.popularity));console.log(root);render(root);});</script></body>
</html>

可视化效果

在这里插入图片描述

这篇关于【D3.js 学习记录】——icicle冰锥图,sunburst光晕图数据可视化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/226251

相关文章

解决mysql插入数据锁等待超时报错:Lock wait timeout exceeded;try restarting transaction

《解决mysql插入数据锁等待超时报错:Lockwaittimeoutexceeded;tryrestartingtransaction》:本文主要介绍解决mysql插入数据锁等待超时报... 目录报错信息解决办法1、数据库中执行如下sql2、再到 INNODB_TRX 事务表中查看总结报错信息Lock

apache的commons-pool2原理与使用实践记录

《apache的commons-pool2原理与使用实践记录》ApacheCommonsPool2是一个高效的对象池化框架,通过复用昂贵资源(如数据库连接、线程、网络连接)优化系统性能,这篇文章主... 目录一、核心原理与组件二、使用步骤详解(以数据库连接池为例)三、高级配置与优化四、典型应用场景五、注意事

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》:本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创

Nacos日志与Raft的数据清理指南

《Nacos日志与Raft的数据清理指南》随着运行时间的增长,Nacos的日志文件(logs/)和Raft持久化数据(data/protocol/raft/)可能会占用大量磁盘空间,影响系统稳定性,本... 目录引言1. Nacos 日志文件(logs/ 目录)清理1.1 日志文件的作用1.2 是否可以删除

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志,日志文件自动归档和压缩2.1、

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

qtcreater配置opencv遇到的坑及实践记录

《qtcreater配置opencv遇到的坑及实践记录》我配置opencv不管是按照网上的教程还是deepseek发现都有些问题,下面是我的配置方法以及实践成功的心得,感兴趣的朋友跟随小编一起看看吧... 目录电脑环境下载环境变量配置qmake加入外部库测试配置我配置opencv不管是按照网上的教程还是de

8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

《8种快速易用的PythonMatplotlib数据可视化方法汇总(附源码)》你是否曾经面对一堆复杂的数据,却不知道如何让它们变得直观易懂?别慌,Python的Matplotlib库是你数据可视化的... 目录引言1. 折线图(Line Plot)——趋势分析2. 柱状图(Bar Chart)——对比分析3

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp