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

D3.js及实例应用

news 来源：原创 2025/6/4 17:22:56

文章目录

- D3.js
- d3.js 应用实例
- - 图标展示
  - 点击选择
  - 拖拉拽应用

D3.js

D3.js是一个功能强大的JavaScript库，除了图标展示，还能实现多种类型的交互效果：

数据可视化交互
- 动态更新图表：根据用户操作（如点击按钮、选择下拉菜单等）实时更新数据，并相应地更新图表展示。例如，在柱状图中，用户可以切换不同的数据集，柱状图会动态调整柱子的高度和数量。
- 数据过滤与筛选：提供交互手段让用户根据特定条件过滤或筛选数据，从而在图表中仅展示符合要求的数据子集。比如，在一个包含多个城市销售数据的折线图中，用户可以通过勾选城市名称的复选框，只显示特定城市的销售数据变化趋势。
- 数据排序：允许用户对数据进行排序，使图表按照新的顺序展示数据。以柱状图为例，用户可以点击一个按钮，让柱子按照从高到低或从低到高的顺序排列，从而更直观地比较数据大小。
图形元素交互
- 元素突出显示：当用户鼠标悬停在某个图形元素（如柱状图中的柱子、饼图中的扇区等）上时，该元素可以通过改变颜色、大小、透明度等属性来突出显示，以提供更多关于该元素的信息。例如，在一个地图上，当鼠标悬停在某个城市的图标上时，该城市的名称和相关统计数据会显示出来，同时图标的颜色会变亮。
- 元素选择与取消选择：用户可以通过点击等操作选择图形元素，被选中的元素可以呈现出特定的样式（如添加边框、改变填充颜色等），以表示其处于选中状态。再次点击该元素或执行其他特定操作，可以取消选择，元素恢复到原始样式。这种交互在处理多个图形元素时非常有用，例如在一个包含多个数据点的散点图中，用户可以选择特定的数据点，然后对这些选中的数据点进行进一步的分析或操作。
- 元素移动、缩放与旋转：通过交互操作，用户可以对图形元素进行移动、缩放或旋转。例如，在一个流程图中，用户可以拖动某个流程节点到新的位置，以调整流程图的布局；在一个地图应用中，用户可以通过缩放操作（如滚动鼠标滚轮或使用双指缩放手势）来放大或缩小地图，以便查看更详细的地理信息或更广阔的区域；在一个三维模型展示中，用户可以通过旋转操作（如拖动鼠标或使用特定的旋转按钮）来改变三维模型的视角，从不同角度观察模型的细节。
导航与控制交互
- 菜单与选项卡：创建菜单或选项卡界面，用户可以通过点击菜单项或切换选项卡来执行不同的操作或查看不同的内容。例如，在一个数据可视化应用中，菜单可以包含“导入数据”“导出图表”“设置图表样式”等菜单项，用户通过点击相应的菜单项来完成特定的操作；选项卡界面可以用于展示不同类型的图表或数据视图，用户通过切换选项卡来快速查看和比较不同的数据展示方式。
- 按钮与滑块：按钮是一种常见的交互元素，用户通过点击按钮来触发特定的操作，如提交表单、执行数据分析、刷新图表等。例如，在一个调查表单页面中，用户填写完所有的调查问题后，点击“提交”按钮，表单数据会被发送到服务器进行处理；滑块则常用于调整数值参数，用户可以通过拖动滑块来改变某个数值的大小，例如在一个图表的动画展示中，用户可以通过拖动滑块来控制动画的播放速度，或者在一个地图应用中，用户可以通过拖动滑块来调整地图的亮度或对比度。
- 导航栏与面包屑导航：导航栏通常位于页面的顶部或侧边栏，用于展示网站或应用的主要功能模块或页面链接，用户可以通过点击导航栏中的链接来快速跳转到不同的页面或执行不同的操作。例如，在一个电商网站中，导航栏可能包含“首页”“商品分类”“购物车”“我的订单”等链接，用户通过点击这些链接来浏览商品、管理购物车和查看订单状态等；面包屑导航则是一种辅助导航方式，通常显示在页面的顶部，用于展示用户当前所在页面在网站结构中的位置路径，用户可以通过点击面包屑导航中的链接来快速返回上级页面或跳转到其他相关页面。例如，在一个新闻网站中，当用户点击进入一篇具体的新闻文章页面时，面包屑导航可能会显示“首页 > 新闻分类 > 具体新闻文章”，用户通过点击“新闻分类”或“首页”等链接，可以方便地在网站的不同页面之间进行导航。

d3.js 应用实例

以下是一个使用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 SVG Example</title><script src="https://d3js.org/d3.v7.min.js"></script><style>svg {border: 1px solid #ccc;}</style>
</head><body><svg width="500" height="300"></svg><script>// 创建SVG元素const svg = d3.select('svg');// 定义一些图标数据，这里以简单的圆形和矩形为例const data = [{ shape: 'circle', cx: 50, cy: 50, r: 30, fill: 'red' },{ shape: 'rect', x: 150, y: 20, width: 60, height: 40, fill: 'blue' },{ shape: 'circle', cx: 250, cy: 100, r: 20, fill: 'green' },{ shape: 'rect', x: 350, y: 50, width: 40, height: 60, fill: 'orange' }];// 根据数据绘制图标svg.selectAll('g').data(data).enter().append('g').each(function (d) {const g = d3.select(this);if (d.shape === 'circle') {g.append('circle').attr('cx', d.cx).attr('cy', d.cy).attr('r', d.r).attr('fill', d.fill);} else if (d.shape === 'rect') {g.append('rect').attr('x', d.x).attr('y', d.y).attr('width', d.width).attr('height', d.height).attr('fill', d.fill);}});</script>
</body></html>

点击选择

在上述代码基础上，添加点击事件处理：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D3.js SVG Example</title><script src="https://d3js.org/d3.v7.min.js"></script><style>svg {border: 1px solid #ccc;}.selected {stroke: black;stroke-width: 2;}</style>
</head><body><svg width="500" height="300"></svg><script>// 创建SVG元素const svg = d3.select('svg');// 定义一些图标数据，这里以简单的圆形和矩形为例const data = [{ shape: 'circle', cx: 50, cy: 50, r: 30, fill: 'red' },{ shape: 'rect', x: 150, y: 20, width: 60, height: 40, fill: 'blue' },{ shape: 'circle', cx: 250, cy: 100, r: 20, fill: 'green' },{ shape: 'rect', x: 350, y: 50, width: 40, height: 60, fill: 'orange' }];// 根据数据绘制图标const groups = svg.selectAll('g').data(data).enter().append('g').each(function (d) {const g = d3.select(this);if (d.shape === 'circle') {g.append('circle').attr('cx', d.cx).attr('cy', d.cy).attr('r', d.r).attr('fill', d.fill);} else if (d.shape === 'rect') {g.append('rect').attr('x', d.x).attr('y', d.y).attr('width', d.width).attr('height', d.height).attr('fill', d.fill);}// 为每个图标添加点击事件g.on('click', function () {// 清除之前选中的图标样式svg.selectAll('.selected').classed('selected', false);// 为当前点击的图标添加选中样式d3.select(this).classed('selected', true);});});</script>
</body></html>

拖拉拽应用

继续在上述代码基础上，添加拖拉拽功能：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D3.js SVG Example</title><script src="https://d3js.org/d3.v7.min.js"></script><style>svg {border: 1px solid #ccc;}.selected {stroke: black;stroke-width: 2;}</style>
</head><body><svg width="500" height="300"></svg><script>// 创建SVG元素const svg = d3.select('svg');// 定义一些图标数据，这里以简单的圆形和矩形为例const data = [{ shape: 'circle', cx: 50, cy: 50, r: 30, fill: 'red' },{ shape: 'rect', x: 150, y: 20, width: 60, height: 40, fill: 'blue' },{ shape: 'circle', cx: 250, cy: 100, r: 20, fill: 'green' },{ shape: 'rect', x: 350, y: 50, width: 40, height: 60, fill: 'orange' }];// 根据数据绘制图标const groups = svg.selectAll('g').data(data).enter().append('g').each(function (d) {const g = d3.select(this);if (d.shape === 'circle') {g.append('circle').attr('cx', d.cx).attr('cy', d.cy).attr('r', d.r).attr('fill', d.fill);} else if (d.shape === 'rect') {g.append('rect').attr('x', d.x).attr('y', d.y).attr('width', d.width).attr('height', d.height).attr('fill', d.fill);}// 为每个图标添加点击事件g.on('click', function () {// 清除之前选中的图标样式svg.selectAll('.selected').classed('selected', false);// 为当前点击的图标添加选中样式d3.select(this).classed('selected', true);});});// 创建拖拽行为const drag = d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);// 将拖拽行为应用到所有图标组上groups.call(drag);function dragstarted(event, d) {d3.select(this).raise().classed('selected', true);}function dragged(event, d) {const dx = event.x - d3.select(this).attr('x');const dy = event.y - d3.select(this).attr('y');d3.select(this).attr('transform', `translate(${dx},${dy})`);}function dragended(event, d) {d3.select(this).classed('selected', false);}</script>
</body></html>

在上述代码中，首先创建了SVG元素并绘制了一些简单的圆形和矩形图标。然后，为每个图标添加了点击事件，点击时会选中该图标并添加特定样式。最后，创建了拖拽行为并应用到所有图标上，实现了图标可以被拖拉拽的功能。

D3.js及实例应用

文章目录 D3.jsd3.js 应用实例图标展示点击选择拖拉拽应用 D3.js D3.js是一个功能强大的JavaScript库，除了图标展示，还能实现多种类型的交互效果： 数据可视化交互动态更新图表：根据用户操作（如点击按钮、选择下拉菜…...

编程日记 2025/6/4 17:22:56

管理权限特权

管理权限 Oracle 用户权限分为两种类型： 系统权限：允许用户在数据库中执行特定的操作。对象权限：允许用户访问和操作特定的对象。系统权限 Oracle 数据库中有超过100种不同的系统权限。权限中的 “ANY” 关键字表示用户在任何模式&#x…...

编程日记 2025/6/4 16:23:46

为什么相关性不是因果关系？人工智能中的因果推理探秘

目录一、背景 （一）聚焦当下人工智能 （二）基于关联框架的人工智能 （三）基于因果框架的人工智能二、因果推理的基本理论 （一）因果推理基本范式：因果模型&#xff0…...

编程日记 2025/6/4 16:27:43

【QT】已解决：Qt4.11.0无法使用MSVC编译器问题

目录一、背景 1.本机环境 2.问题描述 3.问题解决前后对比图二、详细操作 1.下载项目二所需qt环境 2.解决思路 3.安装VS2017 4.安装MSVC调试器 5.打开qtCreator查看编译器 5.编译运行项目二三、参考一、背景 1.本机环境 windows11 qtCreator4.11.0 minGW 64位…...

编程日记 2025/6/3 7:08:35

python如何解析word文件格式（.docx）

python如何解析word文件格式（.docx） .docx文件遵从开源的“Office Open XML标准”，这意味着我们能用python的文本操作对它进行操作（实际上PPT和Excel也是）。而且这并不是重复造轮子，因为市面上操作.docx的…...

编程日记 2025/6/4 16:42:09

点云目标检测训练数据预处理---平面拟合与坐标转换(python实现)

在做centerpoint训练之前，需要先对点云数据进行标注，然后制作kittti数据集。不用nuScenes或者waymo数据集的理由也很简单，因为麻烦，没有kitti数据集直观。 kitti数据集的格式如下，可以看到数据集中只有航向角&#xff…...

编程日记 2025/6/4 16:44:19

Debezium日常分享系列之：对于从Oracle数据库进行快照的性能优化

Debezium日常分享系列之：对于从Oracle数据库进行快照的性能优化源数据库Kafka Connect监控测试结果源数据库 Oracle 19c，本地，CDB数据库主机的I/O带宽为6 GB/s，由此主机上运行的所有数据库共享临时表空间由42个文件组成&#x…...

编程日记 2025/6/3 13:58:38

logback日志自定义占位符

前言在大型系统运维中，很大程度上是需要依赖日志的。在java大型web工程中，一般都会使用slf4jlogback这一个组合来实现日志的管理。 logback中很多现成的占位符可以可以直接使用，比如线程号【%t】、时间【%d】、日志等级【%p】，…...

编程日记 2025/6/4 16:17:28

【Red Hat8】：搭建FTP服务器

目录一、匿名FTP访问 1、新建挂载文件 2、挂载 3、关闭防火墙 4、搭建yum源 5、安装VSFTPD 6、打开配置文件 7、设置配置文件如下几个参数 8、重启vsftpd服务 9、进入图形化界面配置网络 10、查看IP地址 11、安装ftp服务 12、遇到拒绝连接 13、测试二、本地…...

编程日记 2025/6/4 16:19:53

华为AI培训-NLP实验

中文分词、命名实体识别、语义词性标注、语句逻辑推理、文本摘要、机器翻译、文本情感分析、内容创作 1 实验介绍 1.1 实验背景中文分词、命名实体识别、语义词性标注、语句逻辑推理是自然语言处理领域中的重要任务。中文分词是将连续的汉字序列切分成有意义的词语序列…...

编程日记 2025/6/4 8:01:50

goodreads书籍评论爬取NRC Emotion Lexicon分析

文章目录目标网站数据获取评论情感分析对爬虫、逆向感兴趣的同学可以查看文章，一对一小班教学：https://blog.csdn.net/weixin_35770067/article/details/142514698 目标网站 https://www.goodreads.com/book/show/3656.The_Sea 就是针对一本书进行3000+评论抓取和情感分析…...

编程日记 2025/6/4 16:54:25

【vitePress】基于github快速添加评论功能（giscus）

一.添加评论插件使用giscus来做vitepress 的评论模块，使用也非常的简单，具体可以参考：giscus 文档，首先安装giscus npm i giscus/vue 二.giscus操作打开giscus 文档，如下图所示，填入你的 github 用户…...

编程日记 2025/6/3 13:57:50

论文笔记（六十二）Diffusion Reward Learning Rewards via Conditional Video Diffusion

Diffusion Reward Learning Rewards via Conditional Video Diffusion 文章概括摘要1 引言2 相关工作3 前言4 方法4.1 基于扩散模型的专家视频建模4.2 条件熵作为奖励4.3 训练细节 5 实验5.1 实验设置5.2 主要结果5.3 零样本奖励泛化5.4 真实机器人评估5.5 消融研究 6 结论文章…...

编程日记 2025/6/3 13:56:22

电梯系统的UML文档07

从这个类中得到的类图，构划出了软件的大部分设计。系统结构视图提供软件和整个系统结构最复杂的也是最优雅的描述。和通常的软件系统相比，在分布式嵌入系统中了解系统组件如何协同工作是非常重要的。毕竟，每个类图仅仅是一个系统的静态设计…...

编程日记 2025/6/3 13:57:01

【Python】综合案例--人生重开模拟器

1. 设置初始属性在游戏中我们设定四个属性.: 颜值 (face) 体质 (strong) 智力 (iq) 家境 (home)我们约定每个属性的范围为 [1, 10], 并且总和不能超过 20. 如果玩家输入的初始属性不合理, 就提示输入有误, 重新输入. print("-----------------------------------------…...

编程日记 2025/6/2 23:24:11

vue+高德API搭建前端3D交通页面

1. 模板部分 (<template>) <template><div class"content"><div><div id"container"></div></div></div> </template> 功能：定义了组件的HTML结构。分析： div.content 是最…...

编程日记 2025/6/4 9:17:25

2024年博客之星主题创作｜猫头虎分享AI技术洞察：2025年AI发展趋势前瞻与展望

2025年AI发展趋势前瞻：猫头虎深度解析未来科技与商业机遇摘要 2024年，AI技术迎来爆发式增长，AIGC、智能体、AIRPA、AI搜索、推理模型等技术不断突破，AI应用场景持续扩展。2025年，AI将进入全新发展阶段，W…...

编程日记 2025/6/2 23:26:01

算法刷题笔记——图论篇

这里写目录标题理论基础图的基本概念图的种类度连通性连通图强连通图连通分量强连通分量图的构造邻接矩阵邻接表图的遍历方式深度优先搜索理论基础dfs 与 bfs 区别dfs 搜索过程深搜三部曲所有可达路径广度优先搜索理论基础广搜的使用场景广搜的过程岛屿数量孤岛的总面积沉…...

编程日记 2025/6/2 23:25:16

虚幻基础-1：cpu挑选(14600kf)

能帮到你的话，就给个赞吧 😘 文章目录 ue非常吃cpu拉满主频打开项目编写蓝图运行原因时间长关于压力测试本文以14600kf为例，双12购入，7月份产。 ue非常吃cpu 经本人测试，ue是非常吃cpu的。拉满主频无论任何时间…...

编程日记 2025/6/2 23:25:40

IP地址：127.0.0.1

概述首先，我们需要明确 127.0.0.1 地址的含义。在网络中，127.0.0.1 地址称为本地回环地址，是一种特殊的网络地址，用于让单独的计算机进行自我回路测试和通信。这个地址在 IP 协议中被定义为环回地址。在网络设备中&#xff0c…...

编程日记 2025/6/2 23:24:28

深度学习 | pytorch + torchvision + python 版本对应及环境安装

Hi，大家好，我是半亩花海。要让一个基于 torch 框架开发的深度学习模型正确运行起来，配置环境是个重要的问题，本文介绍了 pytorch、torchvision、torchaudio 及 python 的对应版本以及环境安装的相关流程。目录一、版本对应二…...

编程日记 2025/6/2 23:25:00

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证6）

重新创建WebApi项目，安装Microsoft.AspNetCore.Authentication.JwtBearer包，将之前JwtBearer测试项目中的初始化函数，jwt配置类、token生成类全部挪到项目中。重新编写login函数，之前测试Cookie和Session认证时用的函数适合m…...

编程日记 2025/6/4 11:20:35

企业级流程架构设计思路-基于价值链的流程架构

获取更多企业流程资料纸上得来终觉浅，绝知此事要躬行一.企业流程分级规则定义 1.流程分类分级的总体原则 2.完整的流程体系需要体现出流程的分类分级 03.通用的流程分级方法 04.流程分级的标准二.企业流程架构设计原则 1.流程架构设计原则流程框架是流程体…...

编程日记 2025/6/2 23:24:44

深度学习 DAY2：Transformer（一部分）

前言 Transformer是一种用于自然语言处理（NLP）和其他序列到序列（sequence-to-sequence）任务的深度学习模型架构，它在2017年由Vaswani等人首次提出。Transformer架构引入了自注意力机制（self-attention mech…...

编程日记 2025/6/2 15:28:08

【2025】拥抱未来砥砺前行

2024是怎样的一年 2024在历史画卷上是波澜壮阔的一年，人工智能的浪潮来临，涌现出无数国产大模型。 22年11月ChatGPT发布，它的出现如同在平静湖面上投下一颗巨石，激起了层层波澜，短短五天用户数就达到了100万&#xff0…...

编程日记 2025/6/4 3:50:04

精选100+套HTML可视化大屏模板源码素材

大屏数据可视化以大屏为主要展示载体的数据可视化设计。 “大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣。使用方法&…...

编程日记 2025/6/4 3:49:47

下载离线安装包 proxysql-2.0.8-1-centos7.x86_64.rpm 链接: https://pan.baidu.com/s/1R-SJiVUEu24oNnPFlm9wRw 提取码: sa2w离线安装proxysql yum localinstall -y proxysql-2.0.8-1-centos7.x86_64.rpm 启动proxysql并检查状态 systemctl start proxysql 启动proxysql syste…...

编程日记 2025/6/4 3:51:59

Electron实践继续

文章目录前言一、知识储备前提二、开发工具集（一）代码编辑器之选（二）命令行工具运用（三）Git 与 GitHub 协作利器（四）Node.js 与 npm 核心环境你的第一个Electron应用程序前言上…...

编程日记 2025/6/4 3:51:09

【STM32-学习笔记-11-】RTC实时时钟

文章目录 RTC实时时钟一、RTC简介二、RTC框图三、RTC基本结构四、RTC操作注意事项五、RTC函数六、配置RTCMyRTC.c 七、示例：实时时钟①、main.c②、MyRTC.c③、MyRTC.h RTC实时时钟一、RTC简介 RTC（Real Time Clock）实时时钟 RTC是一个独立…...

编程日记 2025/6/4 3:51:40

使用ffmpeg提高mp4压缩比，减小文件体积【windows+ffmpeg+batch脚本】

文章目录关于前情提要FFmpeg是什么使用脚本运行FFmpeg首先，下载ffmpeg.exe然后在视频相同位置写一个bat脚本运行压缩脚本关于个人博客，里面偶尔更新，最近比较忙。发一些总结的帖子和思考。江湖有缘相见🤝。如果读者想和我交…...

编程日记 2025/6/4 3:50:19

PostgreSQL-01-入门篇-简介

文章目录 1. PostgreSQL是什么?2. PostgreSQL 历史 2.1. 伯克利 POSTGRES 项目2.2. Postgres952.3. PostgreSQL来了 3. PostgreSQL vs MySQL4. 安装 4.1 Windows 安装4.2 linux 安装4.3 docker安装 1. PostgreSQL是什么 PostgreSQL 是一个基于加州大学伯克利分校计算机系开…...

编程日记 2025/6/4 3:50:37

虚拟专用网VPN的概念及实现VPN的关键技术

虚拟专用网VPN通过建立在公共网络上的重要通道(1分),实现远程用户、分支机构、业务伙伴等与机构总部网络的安全连接，从而构建针对特定组织机构的专用网络，实现与专用网络类似的功能，可以达到PN安全性的目的，同时成本相对要低很多(…...

编程日记 2025/6/4 3:51:24

电脑风扇声音大怎么办? 原因及解决方法

电脑风扇是电脑的重要组件之一，它的作用是为电脑的各个部件提供冷却，防止电脑过热。然而，有时候我们会发现电脑风扇的声音特别大，不仅影响我们的使用体验，也可能是电脑出现了一些问题。那么，电脑风扇声音大…...

编程日记 2025/6/3 13:13:24

【Pytorch】unsqueeze与expand结合使用

示例代码 mask mask.unsqueeze(1).expand(-1, N, -1, -1)unsqueeze(1) 操作 unsqueeze是一个在指定位置增加维度的方法。在这行代码中，mask.unsqueeze(1)的作用是在mask张量的第二个维度（索引为1的位置）上插入一个新的维度。例如&#xf…...

编程日记 2025/6/4 3:50:53

基于 Spring Boot 和 Vue.js 的全栈购物平台开发实践

在现代 Web 开发中，前后端分离的架构已经成为主流。本文将分享如何使用 Spring Boot 和 Vue.js构建一个全栈购物平台，涵盖从后端 API 开发到前端页面实现的完整流程。 1. 技术栈介绍后端技术栈 JDK 1.8：稳定且广泛使用的 Java 版本。 Spring…...

编程日记 2025/6/3 20:23:31

MongoDB单机版安装

MongoDB单机版安装在CentOS Linux release 7.9.2009 (Core)下安装MongoDB的步骤如下： 1 创建用户和组（可选，根据需要） 如果您希望以非root用户运行MongoDB服务，可以创建一个专用的用户和组。 groupadd mongodb us…...

编程日记 2025/6/3 20:21:44

HTTP/2 与 HTTP/3 的新特性

一、引言在互联网蓬勃发展的浪潮中，HTTP 协议作为网络通信的基石，历经多次迭代升级，不断推动着网络传输效率与性能的提升。从最初简单的 HTTP/0.9 版本，仅能实现基本的文本传输，到 HTTP/1.0 引入多种请求方法与头部信…...

编程日记 2025/6/4 13:23:53

【软件开发过程管理规范】需求管理，需求分析，设计开发管理，测试管理（Word）

一、需求管理规程 1 简介 2 过程总体描述 2.1 过程概述 2.2 过程流程图 3 过程元素描述 3.1 准备阶段 3.2 需求调研 3.3 需求分析软件开发人员及用户往往容易忽略信息沟通，这导致软件开发出来后不能很好地满足用户的需要，从而造成返工。而返工不仅在技术…...

编程日记 2025/6/3 6:02:21

mysql的主从配置

#mysql数据库 #主从 MySQL数据库主从配置 1.MySQL主从介绍 MySQL 主从又叫做 Replication、AB 复制。简单讲就是 A 和 B 两台机器做主从后，在 A 上写数据，另外一台 B 也会跟着写数据，两者数据实时同步的。 MySQL 主从是基于 binlog 的&…...

编程日记 2025/6/3 16:53:43

debian中apt的配置与解析

引言在系统使用过程中，我们可能会遭遇 apt update 操作出现问题，或者 apt upgrade 速度迟缓的情况。这往往是由于所使用软件源本身存在诸如服务器性能不佳、维护不及时等质量问题，同时，软件源服务器与我们所处地理位置的距离较远…...

编程日记 2025/6/3 20:24:25

Python Pyside6 加Sqlite3 写一个通用进销存系统初型

图：说明：进销存管理系统说明文档功能模块 1. 首页显示关键业务数据商品总数供应商总数本月采购金额本月销售金额显示预警信息库存不足预警待付款采购单待收款销售单2. 商品管理商品信息维护商品编码（唯一标识）商品名称规格型号单位分类进货价销售价库存数量预警…...

编程日记 2025/6/3 20:22:32

Java工程结构：服务器规约（JVM 碰到 OOM 场景时输出 dump 信息、设置tomcat的 JVM 的内存参数、了解服务平均耗时）

文章目录 I 调用远程操作必须有超时设置。II 推荐了解每个服务大致的平均耗时JVM 的 Xms 和 Xmx 设置一样大小的内存容量让 JVM 碰到 OOM 场景时输出 dump 信息调大服务器所支持的最大文件句柄数（File Descriptor，简写为 fd）高并发服务器建议调小 TCP 协议的 time_wait 超时…...

编程日记 2025/6/3 20:23:50

Spring经典面试题

在Spring的面试中，经常会被问到一些经典的问题，这些问题涵盖了Spring的基本概念、核心特性、工作原理以及在实际项目中的应用。以下是一些Spring面试中最经典的题目： 一、Spring概述什么是Spring框架？Spring框架有哪些主要模块&…...

编程日记 2025/6/3 20:22:09

以太网实战AD采集上传上位机——FPGA学习笔记27

一、设计目标使用FPGA实现AD模块驱动采集模拟电压，通过以太网上传到电脑上位机。二、框架设计数据位宽转换模块（ad_10bit_to_16bit）：为了方便数据传输，数据位宽转换模块实现了将十位的 AD 数据转换成十六位&#…...

编程日记 2025/6/3 20:22:50

数据结构与算法整理复习（一）：数据结构概念与线性表

目录第一章：绪论 1.1 数据结构的基本概念 1.2 算法与算法评价第二章：线性表 2.1 线性表的定义和基本操作 2.2 线性表的顺序表示（顺序表） 应用题 2.3 线性表的链式表达（链表） 2.3.1 单链表 2.3.2…...

编程日记 2025/6/3 22:14:25

虚幻商城 Fab 免费资产自动化入库

文章目录一、背景二、实现效果展示三、实现自动化入库一、背景上一次写了个这篇文章虚幻商城 Quixel 免费资产一键入库，根据这个构想，便决定将范围扩大，使 Fab 商城的所有的免费资产自动化入库，是所有！所有！上一篇文章是根据下图这部分资产一键入库：而这篇文章则…...

编程日记 2025/6/3 22:14:09

TCP Window Full是怎么来的

wireshark查看包时，会看到TCP Window Full，总结下它的特点： 1. Sender会显示 TCP Window Full 2. “Sender已发出，但，Receiver尚未ack的字节”，即Sender的 bytes in flights 3. Sender的 bytes in fligh…...

编程日记 2025/6/3 22:16:18

高效建站指南：通过Portainer快速搭建自己的在线网站

文章目录前言1. 安装Portainer1.1 访问Portainer Web界面 2. 使用Portainer创建Nginx容器3. 将Web静态站点实现公网访问4. 配置Web站点公网访问地址4.1公网访问Web站点 5. 固定Web静态站点公网地址6. 固定公网地址访问Web静态站点前言 Portainer是一个开源的Docker轻量级可视…...

编程日记 2025/6/3 5:15:38

“UniApp的音频播放——点击视频进入空白+解决视频播放器切换视频时一直加载的问题”——video.js、video-js.css

今天，又解决了一个单子“UniApp的音频播放——点击视频进入空白解决视频播放器切换视频时一直加载的问题” 一、问题描述在开发一个基于 video.js 的视频播放器时，用户通过上下滑动切换视频时，视频一直处于加载状态，无法正常播放…...

编程日记 2025/6/3 22:16:02