当前位置： 首页 > news >正文

「数据可视化 D3系列」入门第九章：交互式操作详解

news 来源：原创 2025/8/16 19:39:23

交互式操作详解

    • 一、交互式操作的核心概念
    • 二、当前柱状图的交互实现
    • 三、交互效果的增强建议
    • 四、为饼图做准备
    • 五、交互式柱状图代码示例
    • 小结
      • 核心要点
    • 下章预告：将这些交互技术应用于饼图实现

在上一章的柱状图基础上，我们增加了交互功能，让图表能够响应用户的操作。下面我将详细解释交互式操作的实现方式，并展示如何为下一章的饼图做准备。

一、交互式操作的核心概念

D3.js 的交互式操作主要通过事件监听来实现，语法与 jQuery 类似：

selection.on('eventName', function(){ ... })

  • 第一个参数：要监听的事件名称（如 click, mouseover, mouseout 等）

  • 第二个参数：事件触发时要执行的函数

二、当前柱状图的交互实现

在现有代码中，我们为矩形元素添加了两个事件监听器：

.on('mouseover',function () {  // 鼠标移入事件d3.select(this)  // 这里的this指向当前矩形元素.transition()  // 添加过渡效果.duration(1000)  // 过渡持续时间1秒.delay(200)  // 延迟200毫秒开始.attr('fill','green');  // 最终变为绿色
})
.on('mouseout',function () {  // 鼠标移出事件d3.select(this).transition().duration(1000).delay(200).attr('fill','pink');  // 恢复为粉色
})

三、交互效果的增强建议

1. 添加点击事件：
可以为柱状图添加点击事件，显示更多数据细节

2. 添加工具提示：
当鼠标悬停时显示数值提示框

3. 动画效果优化：
可以尝试不同的缓动函数(easing)让动画更自然

四、为饼图做准备

1. 鼠标悬停高亮： 当鼠标悬停在某个扇形上时，可以将其突出显示

2. 点击事件： 点击扇形可以展开显示详细信息

3. 过渡动画： 扇形的大小变化可以添加平滑的过渡效果

五、交互式柱状图代码示例

👇 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交互式柱状图</title><script src="https://d3js.org/d3.v5.min.js"></script><style>.tooltip {position: absolute;padding: 8px;background: rgba(0, 0, 0, 0.8);color: white;border-radius: 4px;pointer-events: none;font-size: 12px;}</style>
</head>
<body><svg width="500" height="400"></svg>
<div class="tooltip" style="opacity: 0;"></div></body><script>var data = [90,75,12,36,54,88,24,66];var margin = 30;//svg 上下左右边距var svg = d3.select('svg');var width = svg.attr('width');var height = svg.attr('height');var tooltip = d3.select('.tooltip');//创建分组var g = svg.append('g').attr('transform','translate('+ margin +','+ margin +')');//定义 x y 轴比例尺var scaleX = d3.scaleBand().domain(d3.range(data.length)).range([0,width - margin*2]);var scaleY = d3.scaleLinear().domain([0,d3.max(data)]).range([height - margin*2,0]);//绘画 x y  轴var axisX = d3.axisBottom(scaleX);var axisY = d3.axisLeft(scaleY);g.append('g').attr('transform','translate(0,'+ (height - margin*2) +')').call(axisX);g.append('g').attr('transform','translate(0,0)').call(axisY);// 创建矩形分组var gs = g.selectAll('rect').data(data).enter().append('g');//绘 柱状图  +  交互效果var rectP = 10;//柱状图间距gs.append('rect').attr('x',function (d,i) {return scaleX(i) + rectP/2;}).attr('y',function (d,i) {return scaleY(d);}).attr('width',function (d,i) {return scaleX.step() - rectP;}).attr('height',function (d,i) {return height - margin*2 - scaleY(d);}).attr('fill','pink')// 添加鼠标交互事件.on('mouseover',function (d, i) {// 高亮当前柱形d3.select(this).transition().duration(300).attr('fill','green');// 显示工具提示tooltip.transition().duration(300).style('opacity', 1);tooltip.html("数值: " + d).style('left', (d3.event.pageX + 10) + 'px').style('top', (d3.event.pageY - 20) + 'px');}).on('mouseout',function () {// 恢复颜色d3.select(this).transition().duration(300).attr('fill','pink');// 隐藏工具提示tooltip.transition().duration(300).style('opacity', 0);}).on('click', function(d, i) {alert("你点击了第 " + (i+1) + " 个柱形，数值为: " + d);});//绘 文字  +  过度效果gs.append('text').attr('x',function (d,i) {return scaleX(i) + rectP/2;}).attr('y',function (d,i) {return scaleY(d);}).attr('dx',function (d,i) {return 12.5;}).attr('dy',function (d,i) {return 20;})       .text(function (d,i) {return d;}).transition().duration(2000).delay(function (d,i) {return i*300;//300毫秒}).attr('y',function (d,i) {return scaleY(d);});
</script>
</html>

👇 实现效果：

在这里插入图片描述

小结

核心要点

1. 事件监听机制：

  • 使用 on('eventName', callback) 方法实现交互

  • 支持多种事件类型（mouseover/mouseout/click 等）

  • 回调函数中的 this 指向当前DOM元素

2. 过渡动画效果：

  • 通过 transition() 方法创建平滑过渡

  • 可配置参数：

    • duration() 控制动画时长
    • delay() 设置延迟执行
    • ease() 指定缓动函数（默认 cubic-in-out）

3. 典型交互模式：

  • 鼠标悬停高亮（mouseover/mouseout）

  • 点击响应（click）

  • 工具提示显示（配合HTML/CSS实现）

下章预告：将这些交互技术应用于饼图实现

  • d3.arc() 生成器的工作原理

  • 饼图布局（d3.pie()）的数据转换

  • 扇形元素的交互特效实现

  • 标签位置的自适应计算

相关文章：

「数据可视化 D3系列」入门第九章：交互式操作详解

交互式操作详解 一、交互式操作的核心概念二、当前柱状图的交互实现三、交互效果的增强建议四、为饼图做准备五、交互式柱状图代码示例小结核心要点 下章预告&#xff1a;将这些交互技术应用于饼图实现 在上一章的柱状图基础上&#xff0c;我们增加了交互功能&#xff0c;让图表…...

编程日记 2025/8/16 19:39:23

吃透LangChain(五)：多模态输入与自定义输出

多模态数据输入 这里我们演示如何将多模态输入直接传递给模型。我们目前期望所有输入都以与OpenAl 期望的格式相同的格式传递。对于支持多模态输入的其他模型提供者&#xff0c;我们在类中添加了逻辑以转换为预期格式。 在这个例子中&#xff0c;我们将要求模型描述一幅图像。 …...

编程日记 2025/8/16 19:36:33

数据结构基本概念

1 数据结构概述 数据结构是计算机组织&#xff08;逻辑结构&#xff09;、存储&#xff08;物理结构&#xff09;数据的方式。和具体的计算机编程语言无关&#xff0c;可以使用任何编程语言来实现数据结构 1.1 数据逻辑结构 反映数据元素之间的逻辑关系&#xff0c;逻辑关系…...

编程日记 2025/8/16 19:39:22

flutter app实现分辨率自适应的图片资源加载

在 Flutter 中&#xff0c;为了实现分辨率自适应的图片资源加载&#xff0c;确实需要遵循特定的目录结构和命名规则。这种机制允许 AssetImage 根据设备的 设备像素比&#xff08;Device Pixel Ratio, DPR&#xff09; 自动选择最合适的图片资源。以下是详细的说明和实现步骤&a…...

编程日记 2025/8/16 19:37:28

Webpack基础

目录 一、Webpack概念 二、Webpack使用步骤 三、Webpack.config.js配置文件 四、entry 和 output 1. entry 2. output 五、module 1. CSS 2. 图片 3. babel 4. 总结 六、plugins 1.自动生成 html 文件 七、其它 1.webpack-dev-server 开发服务器 2. mode 打包模…...

编程日记 2025/8/16 19:37:30

极狐GitLab 用户 API 速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 用户 API 速率限制 (BASIC SELF) 您可以为对 Users API 的请求配置每个用户的速率限制。 要更改速率限制&#xff1a; 1.在…...

编程日记 2025/8/16 6:01:22

用 Go 实现一个轻量级并发任务调度器（支持限速）

前言 在日常开发中&#xff0c;我们经常会遇到这样的场景&#xff1a; • 有一堆任务要跑&#xff08;比如&#xff1a;发请求、处理数据、爬虫等&#xff09;• 不希望一次性全部跑完&#xff0c;担心打爆服务端或者被封• 想要设置并发数、限速&#xff0c;还能控制任务重试…...

编程日记 2025/8/13 9:40:16

华为OD机试真题——最长的顺子（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分 题型 本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析&#xff1b; 并提供Java、python、JavaScript、C、C语言、GO六种语言的最佳实现方式&#xff01; 本文收录于专栏&#xff1a;《2025华为OD真题目录全流程解析/备考攻略/经验…...

编程日记 2025/8/16 19:36:31

3.8/Q1，GBD数据库最新文章解读

文章题目&#xff1a;Regional and National Burden of Traumatic Brain Injury and Spinal Cord Injury in North Africa and Middle East Regions, 1990-2021: A Systematic Analysis for The Global Burden of Disease Study 2021 DOI&#xff1a;10.1007/s44197-025-00372-…...

编程日记 2025/8/16 19:36:33

Java面试中问单例模式如何回答

1. 什么是单例模式&#xff1f; 单例模式&#xff08;Singleton Pattern&#xff09;是一种设计模式&#xff0c;确保某个类在整个应用中只有一个实例&#xff0c;并且提供全局访问点。它有以下特点&#xff1a; 确保只有一个实例。提供全局访问点。防止多次实例化&#xff0…...

编程日记 2025/8/16 19:33:23

再看开源多模态RAG的视觉文档(OCR-Free)检索增强生成方案-VDocRAG

前期几个工作提到&#xff0c;基于OCR的文档解析RAG的方式进行知识库问答&#xff0c;受限文档结构复杂多样&#xff0c;各个环节的解析泛化能力较差&#xff0c;无法完美的对文档进行解析。因此出现了一些基于多模态大模型的RAG方案。如下&#xff1a; 【RAG&多模态】多模…...

编程日记 2025/8/14 4:08:55

【go】什么是Go语言中的GC,作用是什么？调优，sync.Pool优化，逃逸分析演示

Go 语言中的 GC 简介与调优建议 一、GC 简介 Go 的 GC&#xff08;Garbage Collection&#xff09;用于自动管理内存&#xff0c;开发者无需手动释放内存&#xff0c;可以专注于业务逻辑&#xff0c;降低出错概率&#xff0c;提升开发效率。 GC 能够自动发现和回收不再使用的…...

编程日记 2025/8/11 1:00:32

ctfshow-大赛原题-web702

因为该题没有理解到位&#xff0c;导致看wp也一直出错&#xff0c;特此反思一下。 参考yu22x师傅的文章 &#xff1a;CTFSHOW大赛原题篇(web696-web710)_ctfshow 大赛原题-CSDN博客 首先拿到题目&#xff1a; // www.zip 下载源码 我们的思路就是包含一个css文件&#xff0c;…...

编程日记 2025/8/10 19:26:06

基于Redis的4种延时队列实现方式

延时队列是一种特殊的消息队列&#xff0c;它允许消息在指定的时间后被消费。在微服务架构、电商系统和任务调度场景中&#xff0c;延时队列扮演着关键角色。例如&#xff0c;订单超时自动取消、定时提醒、延时支付等都依赖延时队列实现。 Redis作为高性能的内存数据库&#x…...

编程日记 2025/8/13 8:26:49

基于Django实现农业生产可视化系统

基于Django实现农业生产可视化系统 项目截图 登录 注册 首页 农业数据-某一指标表格展示 农业数据-某一指标柱状图展示 农业数据-某一指标饼状图展示 气候数据-平均气温地图展示 气候数据-降水量合并图展示 后台管理 一、系统简介 农业生产可视化系统是一款基于DjangoMVTMyS…...

编程日记 2025/8/16 19:37:02

yocto编译使用共享缓存

注意 服务器端与客户端系统的版本号需为Ubuntu20.04执行用户需要为sudo权限服务器端nfs目录权限必须为nobody:nogroup 服务端配置&#xff1a; 在服务器192.168.60.142上配置 NFS 共享&#xff1a; 1.安装 NFS 服务器&#xff1a; 1 sudo apt-get install nfs-kernel-serve…...

编程日记 2025/8/15 6:45:36

uCOS3实时操作系统（系统架构和中断管理）

文章目录 系统架构中断管理ARM中断寄存器相关知识ucos中断机制 系统架构 ucos主要包含三个部分的源码&#xff1a; 1、OS核心源码及其配置文件&#xff08;ucos源码&#xff09; 2、LIB库文件源码及其配置文件&#xff08;库文件&#xff0c;比如字符处理、内存管理&#xff0…...

编程日记 2025/8/10 19:19:52

web后端语言下篇

#作者&#xff1a;允砸儿 #日期&#xff1a;乙巳青蛇年 三月廿一 笔者今天将web后端语言PHP完结一下&#xff0c;后面还会写一个关于python的番外。 PHP函数 PHP函数它和笔者前面写的js函数有些许类似&#xff0c;都是封装的概念。将实现某一功能的代码块封装到一个结构中…...

编程日记 2025/8/12 1:23:55

Tensorflow释放GPU资源

语言&#xff1a;python 框架&#xff1a;tensorflow 现有问题&#xff1a;用tensorflow进行模型训练&#xff0c;训练完成后用tf.keras.backend.clear_session()命令无法真正实现释放资源的效果。 解决方案&#xff1a;创建多进程&#xff0c;将模型训练作为子进程&#xff0c…...

编程日记 2025/8/10 6:06:11

vscode、cherry studio接入高德mcp服务

最近mcp协议比较火&#xff0c;好多平台都已经开通了mcp协议&#xff0c;今天来接入下高德的mcp看看效果如何。 话不多说&#xff0c;咱们直接开干。 先来看下支持mcp协议的工具有cusor、cline等等。更新cherrystudio后发现上面也有mcp服务器了。今天咱就来试试添加高德的mcp协…...

编程日记 2025/8/15 15:27:51

软考高级-系统架构设计师 论文范文参考（二）

文章目录 论企业应用集成论软件三层结构的设计论软件设计模式的应用论软件维护及软件可维护性论信息系统安全性设计论信息系统的安全性设计(二)论信息系统的架构设计论信息系统架构设计(二) 论企业应用集成 摘要: 2016年9月&#xff0c;我国某省移动通信有限公司决定启动VerisB…...

编程日记 2025/8/13 12:51:20

熵权法+TOPSIS+灰色关联度综合算法（Matlab实现）

熵权法TOPSIS灰色关联度综合算法&#xff08;Matlab实现&#xff09; 代码获取私信回复&#xff1a;熵权法TOPSIS灰色关联度综合算法&#xff08;Matlab实现&#xff09; 摘要&#xff1a; 熵权法TOPSIS灰色关联度综合算法&#xff08;Matlab实现&#xff09;代码实现了一种…...

编程日记 2025/8/16 4:30:49

【java 13天进阶Day05】数据结构,List,Set ,TreeSet集合,Collections工具类

常见的数据结构种类 集合是基于数据结构做出来的&#xff0c;不同的集合底层会采用不同的数据结构。不同的数据结构&#xff0c;功能和作用是不一样的。数据结构&#xff1a; 数据结构指的是数据以什么方式组织在一起。不同的数据结构&#xff0c;增删查的性能是不一样的。不同…...

编程日记 2025/8/14 4:25:15

极狐GitLab 议题和史诗创建的速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 议题和史诗创建的速率限制 (BASIC SELF) 速率限制是为了控制新史诗和议题的创建速度。例如&#xff0c;如果您将限制设置为 …...

编程日记 2025/8/10 7:33:37

AIGC-几款本地生活服务智能体完整指令直接用(DeepSeek，豆包，千问，Kimi，GPT)

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列AIGC(GPT、DeepSeek、豆包、千问、Kimi)👉关于作者 专注于Android/Unity和各种游戏开发技巧，以及各种资…...

编程日记 2025/8/15 0:49:46

十、数据库day02--SQL语句01

文章目录 一、新建查询1.查询窗口的开启方法2. 单语句运行方法 二、数据库操作1.创建数据库2. 使用数据库3. 修改数据库4. 删除数据库和查看所有数据库5. 重点&#xff1a;数据库备份5.1 应用场景5.2 利用工具备份备份操作还原操作 5.3 扩展&#xff1a;使用命令备份 三、数据表…...

编程日记 2025/8/12 17:51:40

2025年MathorCup数学应用挑战赛D题问题一求解与整体思路分析

D题 短途运输货量预测及车辆调度 问题背景 问题分析&#xff1a;四个问题需要建立数学模型解决就业状态分析与预测&#xff0c;旨在通过数学建模对宜昌地区的就业数据进行深入分析&#xff0c;并基于此预测就业状态。提供的数据涵盖了被调查者的个人信息、就业信息、失业信息…...

编程日记 2025/8/12 1:29:48

关于三防漆清除剂

成分及原理 主要成分&#xff1a;通常包含有机溶剂&#xff0c;如丙酮、甲苯、二甲苯等&#xff0c;以及一些表面活性剂、缓蚀剂等添加剂。工作原理&#xff1a;有机溶剂能够溶解三防漆中的树脂等成分&#xff0c;使其失去粘性和附着性&#xff0c;从而可以被轻易地擦拭或冲洗…...

编程日记 2025/8/13 13:27:22

2025年MathorCup数学应用挑战赛【选题分析】

【25MathorCup选题分析】 &#x1f64b;‍♀&#x1f64b;‍♂数模加油站初步分析评估了此次竞赛题目&#xff1a; ✅A题&#xff1a;该题新颖性强&#xff0c;属于“算子学习深度学习几何建模”的交叉问题&#xff0c;涉及PINN、FNO、KAN等算子神经网络模型构建&#xff0c;任…...

编程日记 2025/8/16 8:38:35

在windows上交叉编译opencv供RK3588使用

环境 NDK r27、RK3588 安卓板子、Android 12 步骤操作要点1. NDK 下载选择 r27 版本&#xff0c;解压到无空格路径&#xff08;如 C:/ndk&#xff09;2. 环境变量配置添加 ANDROID_NDK_ROOT 和工具链路径到系统 PATH3. CMake 参数调整指定 ANDROID_NATIVE_API_LEVEL31、ANDRO…...

编程日记 2025/8/11 2:49:52

零基础玩转AI数学建模：从理论到实战

前言 数学建模作为连接数学理论与现实世界的桥梁&#xff0c;在科学研究、工程实践和商业决策等领域发挥着越来越重要的作用。随着人工智能技术的迅猛发展&#xff0c;以ChatGPT为代表的大语言模型为数学建模领域带来了革命性的变革。本书旨在帮助读者掌握这一变革带来的新机遇…...

编程日记 2025/8/11 20:35:15

IDEA 2025.1更新-AI助手试用和第三方模型集成方案

今天刚把 IntelliJ IDEA 更新到了 2025.1 版本&#xff0c;主要是想看看这次 AI Assistant 有什么新东西。之前看到消息说功能有更新&#xff0c;而且似乎可以免费试用&#xff0c;就动手试了试&#xff0c;顺便把过程和一些发现记录下来&#xff0c;给可能需要的朋友一个参考。…...

编程日记 2025/8/11 18:02:01

static关键字

思维导图&#xff1a; 在 Java 中&#xff0c;static 是一个非常重要的关键字&#xff0c;它可以用来修饰类的成员&#xff0c;包括变量、方法、代码块以及内部类。下面为你详细介绍 static 关键字的各种用法和特点。 一.修饰内部类 静态内部类&#xff1a;当 static 修饰内部类…...

编程日记 2025/8/15 18:21:40

gl-matrix 库简介

gl-matrix 库简介 gl-matrix 是一个高性能的 JavaScript 矩阵和向量库&#xff0c;专门为 WebGL 和其他 3D 图形应用设计。它提供了处理 2D、3D 和 4D 向量以及矩阵运算的高效方法。 主要特性 高性能&#xff1a;经过高度优化&#xff0c;执行速度快轻量级&#xff1a;体积小…...

编程日记 2025/8/14 18:55:00

Spring Boot 核心注解全解：@SpringBootApplication背后的三剑客

大家好呀&#xff01;&#x1f44b; 今天我们要聊一个超级重要的Spring Boot话题 - 那个神奇的主类注解SpringBootApplication&#xff01;很多小伙伴可能每天都在用Spring Boot开发项目&#xff0c;但你真的了解这个注解背后的秘密吗&#xff1f;&#x1f914; 别担心&#x…...

编程日记 2025/8/9 20:43:25

Android 音频架构全解析：从 AudioTrack 到 AudioFlinger

在开发音视频相关应用时&#xff0c;我们常会接触到 MediaPlayer、SoundPool、AudioTrack、OpenSL ES、AAudio、Oboe 等名词&#xff0c;它们都与 Android 的音频播放息息相关。然而&#xff0c;真正理解它们之间的关系以及背后运行机制&#xff0c;才能写出高性能、低延迟的音…...

编程日记 2025/8/13 18:47:08

【教程】无视硬件限制强制升级Windows 11

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 1、下载升级工具&#xff1a;https://github.com/builtbybel/Flyby11/releases 2、解压后打开软件&#xff1a; 3、拖入win11.iso或者自动下载&#xf…...

编程日记 2025/8/15 17:42:01

ICPR-2025 | 让机器人在未知环境中 “听懂” 指令精准导航！VLTNet：基于视觉语言推理的零样本目标导航

作者&#xff1a;Congcong Wen, Yisiyuan Huang, Hao Huang ,Yanjia Huang, Shuaihang Yuan, YuHao, HuiLin and Yi Fang 单位&#xff1a;纽约大学阿布扎比分校具身人工智能与机器人实验室&#xff0c;纽约大学阿布扎比分校人工智能与机器人中心&#xff0c;纽约大学坦登工程…...

编程日记 2025/8/15 15:50:40

替代升级VMware | 云轴科技ZStack构建山西证券一云多芯云平台

通过云轴科技ZStack Cloud云平台&#xff0c;山西证券打造了敏捷部署、简单运维的云平台&#xff0c;不仅兼容x86、海光、鲲鹏三种异构服务器实现一云多芯&#xff0c;还通过云平台虚拟化纳管模块纳管原有VMware虚拟化资源&#xff0c;并对接第三方集中式存储&#xff0c;在保护…...

编程日记 2025/8/15 14:50:23

Houdini python code:参数指定文件路径

创建null节点并命名为control并增加filedir参数 创建python节点 node hou.pwd() geo node.geometry()node hou.node(/obj/output_tetgen/control) filedir node.parm(filedir).eval() print("filedir:",filedir)得到输出...

编程日记 2025/8/15 5:43:40

ChatGPT-o3辅助学术写作的关键词和引言效果如何？

目录 关键词 引言 论文引言&#xff08;≈300 字&#xff09; 大家好这里是AIWritePaper官方账号&#xff0c;官网&#x1f449;AIWritePaper~ 关键词 摘要是文章的精华&#xff0c;通常在200-250词左右。要包括研究的目的、方法、结果和结论。让AI工具作为某领域内资深的研…...

编程日记 2025/8/16 1:15:45

树莓派5+Vosk+python实现语音识别

简介 Vosk是语音识别开源框架&#xff0c;支持二十种语言 - 中文&#xff0c;英语&#xff0c;印度英语&#xff0c;德语&#xff0c;法语&#xff0c;西班牙语&#xff0c;葡萄牙语&#xff0c;俄语&#xff0c;土耳其语&#xff0c;越南语&#xff0c;意大利语&#xff0c;荷…...

编程日记 2025/8/11 2:43:49

Selenium之 CSS 选择器详细讲解

Selenium之 CSS 选择器详细讲解 引言 在.Selenium.自动化测试中&#xff0c;元素定位是至关重要的一环。而.CSS.选择器作为一种强大且灵活的定位工具&#xff0c;在.Selenium.中得到了广泛的应用。本文将详细介绍.CSS.选择器的基本语法、常用类型以及如何在.Selenium.中高效地…...

编程日记 2025/8/16 8:37:12

【LeetCode】大厂面试算法真题回忆(61)--组装新的数组

题目描述 给你一个整数M和数组N，N中的元素为连续整数，要求根据N中的元素组装成新的数组R，组装规则： R中元素总和加起来等于M。R中的元素可以从N中重复选取。R中的元素最多只能有1个不在N中，且比N中的数字都要小（不能为负数）。请输出：数组R一共有多少组装办法。 输入描…...

编程日记 2025/8/13 21:19:02

基于用户的协同过滤推荐系统实战项目

文章目录 基于用户的协同过滤推荐系统实战项目1. 推荐系统基础理论1.1 协同过滤概述1.2 基于用户的协同过滤原理1.3 相似度计算方法1.3.1 余弦相似度(Cosine Similarity)1.3.2 皮尔逊相关系数(Pearson Correlation)1.3.3 欧几里得距离(Euclidean Distance)1.3.4 调整余弦相似度…...

编程日记 2025/8/16 5:31:35

浅析数据库面试问题

以下是关于数据库的一些常见面试问题： 一、基础问题 什么是数据库？ 数据库是按照数据结构来组织、存储和管理数据的仓库。SQL 和 NoSQL 的区别是什么？ SQL 是关系型数据库，使用表结构存储数据；NoSQL 是非关系型数据库，支持多种数据模型（如文档型、键值对型等）。什么是…...

编程日记 2025/8/16 4:56:17

【Python3】Django 学习之路

第一章&#xff1a;Django 简介 1.1 什么是 Django&#xff1f; Django 是一个高级的 Python Web 框架&#xff0c;旨在让 Web 开发变得更加快速和简便。它鼓励遵循“不要重复自己”&#xff08;DRY&#xff0c;Don’t Repeat Yourself&#xff09;的原则&#xff0c;并提供了…...

编程日记 2025/8/12 16:34:26

Java并发编程高频面试题（已整理Java面试宝典PDF完整版）

为什么要使用并发编程 提升多核CPU利用率&#xff1a;现代计算机通常配备多核CPU&#xff0c;通过创建多个线程&#xff0c;操作系统可以将不同线程分配到不同CPU核心上并行执行&#xff0c;从而充分利用硬件资源。若仅使用单线程&#xff0c;则只能利用一个CPU核心&#xff0c…...

编程日记 2025/8/9 5:13:50

第 4 期：DDPM中的损失函数——为什么只预测噪声？

—— 从变分下界到噪声预测 回顾&#xff1a;我们到底在做什么&#xff1f; 在第 3 期中&#xff0c;我们介绍了扩散模型的逆过程建模。简而言之&#xff0c;目标是通过神经网络学习从噪声 x_t​ 中恢复图像 x_0&#xff0c;并且我们通过预测噪声 ϵ来完成这个任务。 今天&a…...

编程日记 2025/8/12 19:50:14

Docker使用、容器迁移

Docker 简介 Docker 是一个开源的容器化平台&#xff0c;用于打包、部署和运行应用程序及其依赖环境。Docker 容器是轻量级的虚拟化单元&#xff0c;运行在宿主机操作系统上&#xff0c;通过隔离机制&#xff08;如命名空间和控制组&#xff09;确保应用运行环境的一致性和可移…...

编程日记 2025/8/13 11:55:31