D3.js实战：数据可视化高级技巧实例应用

基础

首先，我们需要一个HTML文件来引入D3.js库，并准备一个画布来放置我们的图表。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D3.js入门示例</title><script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body><svg width="500" height="500"></svg>
</body>
</html>

创建简单的线图

// 假设我们有以下数据
var data = [4, 8, 15, 16, 23, 42];// 创建SVG画布
var svg = d3.select("svg"),margin = {top: 20, right: 20, bottom: 30, left: 50},width = +svg.attr("width") - margin.left - margin.right,height = +svg.attr("height") - margin.top - margin.bottom;// 创建x和y比例尺
var x = d3.scaleLinear().domain(d3.extent(data, d => d)).range([0, width]);var y = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);// 创建x和y轴
var xAxis = d3.axisBottom(x),yAxis = d3.axisLeft(y);// 添加轴
svg.append("g").attr("transform", "translate(0," + height + ")").call(xAxis);svg.append("g").call(yAxis);// 绘制折线
var line = d3.line().x(d => x(d)).y(d => y(d));svg.append("path").datum(data).attr("class", "line").attr("d", line);

创建柱状图

// 假设我们有以下数据
var data = [4, 8, 15, 16, 23, 42];// 创建SVG画布和比例尺
var svg = d3.select("svg").attr("width", 500).attr("height", 500);
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = +svg.attr("width") - margin.left - margin.right;
var height = +svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
var y = d3.scaleLinear().rangeRound([height, 0]);// 数据映射到比例尺
x.domain(data.map(function(d) { return d; }));
y.domain([0, d3.max(data)]);// 创建SVG g元素
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");// 添加x和y轴
g.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));g.append("g").call(d3.axisLeft(y));// 绘制柱状图
g.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) { return x(d); }).attr("y", function(d) { return y(d); }).attr("width", x.bandwidth()).attr("height", function(d) { return height - y(d); });

创建饼图

// 假设我们有以下数据
var data = [4, 8, 15, 16, 23, 42];// 创建SVG画布和比例尺
var svg = d3.select("svg").attr("width", 500).attr("height", 500);
var radius = Math.min(svg.attr("width"), svg.attr("height")) / 2;// 创建弧度比例尺
var arc = d3.arc().outerRadius(radius).innerRadius(0);
var pie = d3.pie().value(function(d) { return d; });// 绘制饼图
var g = svg.append("g").attr("transform", "translate(" + radius + "," + radius + ")");var arcs = g.selectAll("arc").data(pie(data)).enter().append("g").attr("class", "arc");arcs.append("path").attr("d", arc).attr("fill", function(d, i) { return d3.schemeCategory10[i]; });arcs.append("text").attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }).attr("dy", ".35em").text(function(d) { return d.data; });

交互性与动画

交互性示例：添加悬停效果到柱状图

// 假设已有柱状图基础代码
// ...// 添加悬停效果
g.selectAll(".bar").on("mouseover", function(event, d) {d3.select(this).transition().duration(200).attr("fill", "orange"); // 鼠标悬停颜色变化// 显示数据提示var tooltip = g.append("text").attr("class", "tooltip").attr("x", x(d) + x.bandwidth() / 2).attr("y", y(d) - 10).text(d);}).on("mouseout", function(event, d) {d3.select(this).transition().duration(200).attr("fill", "steelblue"); // 恢复原始颜色// 移除数据提示g.selectAll(".tooltip").remove();});

动画示例：平滑过渡线图数据更新

// 假设已有线图基础代码
// ...// 更新数据
var newData = [8, 15, 16, 23, 42, 45];// 更新比例尺域
x.domain(d3.extent(newData));
y.domain([0, d3.max(newData)]);// 更新轴
g.select(".axis--x").transition().duration(750).call(xAxis);
g.select(".axis--y").transition().duration(750).call(yAxis);// 更新路径
var path = g.select(".line");
path.datum(newData).transition().duration(750).attr("d", line);

复杂图表：力导向图

力导向图展示节点和边的关系，非常适合网络、社交图谱等数据的可视化。

// 假设我们有节点和边的数据
var nodes = [{id: "A"}, {id: "B"}, {id: "C"}];
var links = [{source: nodes[0], target: nodes[1]}, {source: nodes[1], target: nodes[2]}];// 创建SVG画布
var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height");// 创建力模拟
var simulation = d3.forceSimulation(nodes).force("link", d3.forceLink(links).id(function(d) { return d.id; })).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(width / 2, height / 2));// 创建链接和节点
var link = svg.append("g").attr("stroke", "#999").attr("stroke-opacity", 0.6).selectAll("line").data(links).join("line").attr("stroke-width", 2);var node = svg.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll("circle").data(nodes).join("circle").attr("r", 5).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));node.append("title").text(function(d) { return d.id; });simulation.on("tick", ticked);function ticked() {link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });node.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });
}// 拖拽事件处理函数
function dragstarted(event, d) {if (!event.active) simulation.alphaTarget(0.3).restart();d.fx = d.x;d.fy = d.y;
}function dragged(event, d) {d.fx = event.x;d.fy = event.y;
}function dragended(event, d) {if (!event.active) simulation.alphaTarget(0);d.fx = null;d.fy = null;
}

地图可视化

D3.js可以与地理数据格式如GeoJSON配合，创建互动式地图。这包括国家、州、城市边界等。

基本步骤:

  • 加载地图数据：使用D3的d3.json或d3.geoJson加载GeoJSON数据。
  • 创建比例尺：定义地理投影和比例尺，如Mercator或Albers USA。
  • 绑定数据并绘制：将GeoJSON数据绑定到SVG路径元素，并应用投影。
  • 添加交互：如悬停效果、点击事件等。
d3.json("world.geojson").then(function(geoData) {var svg = d3.select("svg"),projection = d3.geoMercator().scale(130).translate([400, 250]),path = d3.geoPath().projection(projection);svg.selectAll("path").data(geoData.features).enter().append("path").attr("d", path).attr("fill", "#ccc").attr("stroke", "#fff");
});

数据绑定与动态更新

基本步骤:

  • 初始化数据绑定：使用data()方法绑定数据到DOM元素。
  • Enter, Update, Exit模式：处理新数据、更新现有数据及移除无用数据。
  • 动态更新：监听数据变化，重新执行绑定和渲染流程。
var svg = d3.select("svg"),data = [4, 8, 15, 16, 23, 42];// 初始化柱状图
var bars = svg.selectAll("rect").data(data);bars.enter().append("rect").attr("x", function(d, i) { return i * 50; }).attr("y", function(d) { return 300 - d; }).attr("width", 40).attr("height", function(d) { return d; });// 动态更新
setInterval(function() {data = data.map(function(d) { return Math.max(0, Math.random() * 50); });bars.data(data).transition().duration(500).attr("y", function(d) { return 300 - d; }).attr("height", function(d) { return d; });
}, 2000);

复杂图表与高级技巧

高级技巧:

  • 使用D3的组件库：像D3fc这样的库提供了高级图表组件，简化复杂图表的创建。
  • 动画与过渡：利用transition()方法创建流畅的动画效果。
  • 交互性：增加点击、悬停事件，使用brush和zoom功能增强用户体验。
  • 性能优化：合理使用selectAll(), data(), enter(), exit()减少DOM操作，使用requestAnimationFrame()优化动画性能。

2024年礼包：2500G计算机入门到高级架构师开发资料超级大礼包免费送！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[移动通讯]【无线感知-P1】[从菲涅尔区模型到CSI模型-3][Mobius transformations-7】【Inversion】

[移动通讯]【无线感知-P1】[从菲涅尔区模型到CSI模型-3][Mobius transformations-7】【Inversion】

前言&#xff1a; mobius map 里面比较难的是inversion &#xff0c;林菲尔德学院&#xff08;Linfield College&#xff09; Michael P. Hitchman. 有本书详细介绍一下该方向的一些原理&#xff0c;例子. Whitman College Book: 《Geometry with an Introduction to Cosmic T…
阅读更多...
el-select选项框内容过长

el-select选项框内容过长

利用popper-class实现选项框内容过长&#xff0c;截取显示功能&#xff1a; <el-select popper-class"popper-class" :popper-append-to-body"false" v-model"value" placeholder"请选择"><el-optionv-for"item in opt…
阅读更多...
js 字符串截取，截取指定字符前面/后面的字符串

js 字符串截取，截取指定字符前面/后面的字符串

一个符号截取&#xff1a; let str hello, how are you doing? username! // 截取 ? 前面的字符串&#xff1a; let before1 str.substring(0,str.lastIndexOf("?")) // 不包含 ? console.log(before1,before1---------------); // hello, how are you doing …
阅读更多...
Java使用httpclient发送POST请求

Java使用httpclient发送POST请求

声明&#xff1a;实习时接到一个送餐机器人项目 涉及到httpclient 1.创建请求对象:post或者get HttpPost httpPost new HttpPost(url); 2. 创建httpclient对象 CloseableHttpClient httpclient HttpClientBuilder.create().build(); 3. 创建请求头对象 BasicResponseHa…
阅读更多...
初识 Linux线程

初识 Linux线程

再学习完Linux进程后,本期,我们来讲解Linux线程 1.为什么需要线程 在之前学习进程前,我们写的所有代码几乎都是单个执行流的,也就是说我们的代码只有一条路走. 在学习进程后,我们可以通过fork进行进程创建,给进程分配任务进行多执行流执行任务,问题来了 那我们为什么还需要…
阅读更多...
使用torch.nn.Sequential构建神经网络

使用torch.nn.Sequential构建神经网络

torch.nn.Sequential 是 PyTorch 中的一个非常有用的类&#xff0c;它允许用户以一种简单和直观的方式构建神经网络。Sequential 容器可以包含多个神经网络层&#xff0c;这些层会按照它们被添加到 Sequential 中的顺序依次执行。 1.关键特性 以下是 torch.nn.Sequential 的一…
阅读更多...
Lenet5硬件加速RTL - 06(nnLinear)

Lenet5硬件加速RTL - 06(nnLinear)

timescale 1ns / 1ps// Description : 全连接层 // Change Logs : 2024.05.10 - Yang.Long - 1.0.0 - module nnLinear #(parameter G_WDEPTH 12 ,//权重深度parameter G_PDEPTH 8 ,//像素深度parameter G_LINEXLEN 160 ,//每行图像宽度pa…
阅读更多...
清空回收站是彻底删除吗？一文解答你的疑问！

清空回收站是彻底删除吗？一文解答你的疑问！

“我刚刚本来想在回收站中恢复一个文件的&#xff0c;但是一不小心就清空了回收站&#xff0c;想问问清空回收站是彻底删除吗&#xff1f;清空了回收站文件还有机会找回吗&#xff1f;” 在使用电脑的过程中&#xff0c;我们经常会将不再需要的文件或文件夹移动到回收站&#x…
阅读更多...
数据结构与算法学习笔记六-二叉树的顺序存储表示法和实现(C语言)

数据结构与算法学习笔记六-二叉树的顺序存储表示法和实现(C语言)

目录 前言 1.数组和结构体相关的一些知识 1.数组 2.结构体数组 3.递归遍历数组 2.二叉树的顺序存储表示法和实现 1.定义 2.初始化 3.先序遍历二叉树 4.中序遍历二叉树 5.后序遍历二叉树 6.完整代码 前言 二叉树的非递归的表示和实现。 1.数组和结构体相关的一些知…
阅读更多...
AUTOSAR OS调度表讲解

AUTOSAR OS调度表讲解

调度表 AUTOSAR OS通过调度表（Schedule Table）来解决一个alarm只能激活一个任务的限制。调度表是预定义的行为序列，通过到期点实现。AUTOSAR OS遍历调度表并依次处理每个到期点，遍历由底层的counter来实现驱动。 到期点发生在从概念零开始的静态配置偏移量上。偏移量在静…
阅读更多...
【程序设计和c语言-谭浩强配套】（适合专升本、考研）

【程序设计和c语言-谭浩强配套】（适合专升本、考研）

一晃大半年没更新了&#xff0c;这一年一直在备考&#xff0c;想着这几天把前段时间学的c语言给大家分享一下&#xff0c;在此做了一个专栏&#xff0c;有需要的小伙伴可私信获取o。 简介&#xff1a;本专栏所有内容皆适合专升本、考研的复习资料&#xff0c;本人手上也有日常…
阅读更多...
Lua 数字格式化

Lua 数字格式化

在编程中&#xff0c;对数字进行格式化是一项常见的任务&#xff0c;特别是当我们需要在用户界面中显示数据或生成报告时。在 Lua 中&#xff0c;我们可以使用一些简单而有效的函数来实现数字的格式化。在本文中&#xff0c;我们将介绍一个由几个函数组成的小型 Lua 库&#xf…
阅读更多...
【2024亚马逊云科技峰会】Amazon Bedrock + Llama3 生成式AI实践

【2024亚马逊云科技峰会】Amazon Bedrock + Llama3 生成式AI实践

在 4 月 18 日&#xff0c;Meta在官网上公布了旗下最新大模型Llama 3。目前&#xff0c;Llama 3已经开放了80亿&#xff08;8B&#xff09;和700亿&#xff08;70B&#xff09;两个小参数版本&#xff0c;上下文窗口为8k&#xff0c;据称&#xff0c;通过使用更高质量的训练数据…
阅读更多...
JAVA学习-练习试用Java实现电话号码的字母组合

JAVA学习-练习试用Java实现电话号码的字母组合

问题: 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits "23" 输…
阅读更多...
Java并发编程之锁的艺术：面试与实战指南（四）

Java并发编程之锁的艺术：面试与实战指南（四）

Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09; 文章目录 Java并发编程之锁的艺术&#xff1a;面试与实战指南&#xff08;四&#xff09;前言二十七、什么是AQS&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff1f;它在Java并发包中…
阅读更多...
Skywalking系列之日志分析语言LAL的配置与解析

Skywalking系列之日志分析语言LAL的配置与解析

提到Skywalking相比并不陌生&#xff0c;或多或少地听到过这个名词&#xff0c;如果你是JAVA开发者&#xff0c;那么可能就更为了解。 作为国内甚至国际上热度比较高、社区比较活跃的APM(Application Performance Monitoring System)系统&#xff0c;它拥有众多的使用者&#…
阅读更多...
react18+ts如何生成二维码并且下载

react18+ts如何生成二维码并且下载

目录 一、下载qrcode.react 二、引入qrcode.react 三 、编写下载二维码的函数 在react开发中如果需要二维码&#xff0c;笔者选择使用qrcode.react来快速生成。 一、下载qrcode.react pnpm add qrcode.react 二、引入qrcode.react import {Box,Stack,Fab} from mui/mate…
阅读更多...
【基础算法总结】二分查找一

【基础算法总结】二分查找一

二分查找一 1. 二分查找2.在排序数组中查找元素的第一个和最后一个位置3.x 的平方根4.搜索插入位置 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1…
阅读更多...
spring boot 线程池

spring boot 线程池

文章目录 引言I 配置线程池II 封装线程池任务执行器2.1 唯一性标识2.2 LogFilter：设置request_id2.3 logback使用request_idIII 检测线程池引言 SpringBootApplication启动类上需要加入注解@EnableAsync或者在配置类上使用 应用场景：封装线程池任务执行器：在任务提交时，会…
阅读更多...
制造业数字化转型解决方案及应用（125页PPT）

制造业数字化转型解决方案及应用（125页PPT）

一、资料介绍 《制造业数字化转型解决方案及应用》是一份内容丰富、深入剖析制造业数字化转型的125页PPT资料。这份资料以“智能制造、制造业数字化转型、制造业数字化转型案例”为关键词&#xff0c;全面展现了制造业数字化转型的核心理念、解决方案以及实际应用案例。 关注…
阅读更多...
最新文章

Copyright @ 2022~2023