<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[XH_jing的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/XH_jing</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; XH_jing]]></copyright><item><title><![CDATA[记一次前端Vue3+Vite+TS项目中使用Mock.js + vite-plugin-mock插件发布到生产（线上）环境填坑汇总]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/150554654</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/150554654</guid><author>XH_jing</author><pubDate>Wed, 20 Aug 2025 15:58:07 +0800</pubDate><description><![CDATA[填坑五、调用接口的时候控制台的NetWork中无法看到，这是因为这里没有真正的服务器的，是通过mockjs对接口进行拦截处理的。但是 如果mockjs在生产环境没有打包好，或者上面的配置有问题的话，则会正常调用接口，并且会报405,404的错误，因为mock拦截没成功，请求正常触发找不到资源就会报错。填坑二、 这里 import.meta.globEager() 引入的文件路径可以使用通配符，需要注意书写格式，要能够成功引入这些ts才行，引入不成功，也不会报错，打包后在生产环境非常难以debug。]]></description><category></category></item><item><title><![CDATA[记一次POST请求中URL中文参数乱码问题的解决方案]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/149354325</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/149354325</guid><author>XH_jing</author><pubDate>Tue, 15 Jul 2025 15:27:09 +0800</pubDate><description><![CDATA["为什么我的POST请求中的中文参数变成了乱码？"——这是许多开发者在处理Web请求时经常遇到的困惑。特别是当参数直接拼接在URL上时，如 https://example.com/api?name=张三，服务器接收到的却变成了 "å¼ ä¸‰" 这样的乱码。本文将深入分析问题原因，并提供多种实用的解决方案。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第十三章：地图可视化全面指南]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147425940</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147425940</guid><author>XH_jing</author><pubDate>Wed, 23 Apr 2025 08:54:28 +0800</pubDate><description><![CDATA[通过本指南，您将掌握D3.js地图可视化的完整技术栈，从基础地理数据格式到高级交互功能，能够创建专业级的地理数据可视化应用。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第十二章：树状图详解与实践]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147423048</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147423048</guid><author>XH_jing</author><pubDate>Tue, 22 Apr 2025 16:30:48 +0800</pubDate><description><![CDATA[树状图是一种常见的层次结构可视化方式，它能够清晰地展示数据之间的父子关系。本文将详细介绍如何使用D3.js创建树状图，并解析相关核心API的使用方法。
]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第十一章：力导向图深度解析与实现]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147338040</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147338040</guid><author>XH_jing</author><pubDate>Fri, 18 Apr 2025 17:57:14 +0800</pubDate><description><![CDATA[力导向图是一种通过物理模拟来展示复杂关系网络的图表类型，特别适合表现社交网络、知识图谱、系统拓扑等关系型数据。其核心原理是通过模拟粒子间的物理作用力（电荷斥力、弹簧引力等）自动计算节点的最优布局。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第十章：饼图绘制详解与实现]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147337977</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147337977</guid><author>XH_jing</author><pubDate>Fri, 18 Apr 2025 17:56:11 +0800</pubDate><description><![CDATA[功能： 生成圆形、扇形或环形路径核心参数：
2. d3.pie() 布局函数

功能： 将原始数据转换为角度数据
特点：

自动计算每个数据项的起始/结束角度
支持排序功能（）
可设置起始角度（）




3. arc.centroid() 中心点计算

数学原理： 
应用场景：

标签定位
交互元素定位
动画中心点



4. 颜色方案

：10种分类颜色
其他方案：

：8种强调色
：12种柔和色




二、饼图实现代码
👇 完整代码
👇 运行效果
1. 数据转换流程：2. 视觉元素构成：3. 交]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第九章：交互式操作详解]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147332323</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147332323</guid><author>XH_jing</author><pubDate>Fri, 18 Apr 2025 14:31:13 +0800</pubDate><description><![CDATA[在上一章的柱状图基础上，我们增加了交互功能，让图表能够响应用户的操作。下面我将详细解释交互式操作的实现方式，并展示如何为下一章的饼图做准备。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第八章：动画效果详解（让图表动起来）]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147320916</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147320916</guid><author>XH_jing</author><pubDate>Fri, 18 Apr 2025 10:10:37 +0800</pubDate><description><![CDATA[在数据可视化中，动画效果不仅能增强视觉吸引力，还能帮助观众更好地理解数据变化过程。本章将详细介绍如何使用D3.js为图表添加流畅的动画效果。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第七章：坐标轴的使用]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147293675</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147293675</guid><author>XH_jing</author><pubDate>Thu, 17 Apr 2025 09:45:13 +0800</pubDate><description><![CDATA[坐标轴是数据可视化中不可或缺的元素，它能帮助观众理解数据的尺度和范围。在D3.js中，坐标轴通常与比例尺配合使用，将抽象的数据映射为可视化的刻度标记。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第六章：比例尺的使用]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147292980</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147292980</guid><author>XH_jing</author><pubDate>Thu, 17 Apr 2025 09:21:55 +0800</pubDate><description><![CDATA[比例尺是 D3.js 中非常重要的概念，它能帮助我们优雅地将数据从定义域映射到可视化的值域中。下一章我们将学习坐标轴的使用，它经常与比例尺配合使用。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第五章：绘制第一个D3图表]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147265463</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147265463</guid><author>XH_jing</author><pubDate>Wed, 16 Apr 2025 09:32:05 +0800</pubDate><description><![CDATA[本章将通过创建基础柱状图，一起来体验D3数据可视化的完整流程。以下是我们将构建的图表效果：]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第四章：DOM操作与元素管理]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147265270</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147265270</guid><author>XH_jing</author><pubDate>Wed, 16 Apr 2025 09:19:28 +0800</pubDate><description><![CDATA[本章将深入探讨D3.js中元素的选择、插入、删除和修改等核心操作，为后续图表绘制打下坚实基础。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第三章：深入理解 Update-Enter-Exit 模式]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147240382</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147240382</guid><author>XH_jing</author><pubDate>Tue, 15 Apr 2025 09:51:46 +0800</pubDate><description><![CDATA[D3.js 的数据绑定遵循一个强大的模式，称为 **Update-Enter-Exit** 模式，这是D3处理数据与DOM元素匹配的核心机制。
]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第二章：选择器与数据绑定]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147240058</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147240058</guid><author>XH_jing</author><pubDate>Tue, 15 Apr 2025 09:44:57 +0800</pubDate><description><![CDATA[D3.js的核心在于 选择元素 和绑定数据，这是所有可视化操作的基础。本章将深入探讨这两个关键概念。
]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」入门第一章：Hello D3.js]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147202252</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147202252</guid><author>XH_jing</author><pubDate>Mon, 14 Apr 2025 09:28:53 +0800</pubDate><description><![CDATA[D3.js（Data-Driven Documents）是一个强大的JavaScript库，它让我们能够用数据驱动文档的变换。让我们从一个简单的"Hello World"示例开始，逐步探索D3的核心概念。
“D3不是图表库，而是数据与DOM绑定的强大工具。]]></description><category></category></item><item><title><![CDATA[「数据可视化 D3系列」之开篇：开启数据可视化之旅]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/147202118</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/147202118</guid><author>XH_jing</author><pubDate>Mon, 14 Apr 2025 09:22:53 +0800</pubDate><description><![CDATA[欢迎来到《快速学习D3.js》系列！在这个系列中，我们将一起从零开始掌握D3.js（Data-Driven Documents），一个强大的JavaScript库，用于创建动态、交互式的数据可视化。无论你是前端开发者、数据分析师，还是对数据可视化感兴趣的学习者，本系列都将帮助你：✅理解D3.js的核心概念（选择集、数据绑定、比例尺等）✅快速上手常见图表（柱状图、折线图、散点图、力导向图等）✅实现交互式可视化（鼠标悬停、缩放、拖拽等）✅优化性能，让你的图表更流畅。]]></description><category></category></item><item><title><![CDATA[「JavaScript深入」Socket.IO：基于 WebSocket 的实时通信库]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/146394978</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/146394978</guid><author>XH_jing</author><pubDate>Thu, 20 Mar 2025 14:38:11 +0800</pubDate><description><![CDATA[Socket.IO 作为 WebSocket 的增强版本，在实时通信领域具有广泛的应用。它提供了事件驱动、自动回退、广播机制等功能，使其在即时聊天、协作编辑、多人游戏等场景中表现出色。如果需要低功耗 IoT 设备通信，可以考虑 MQTT；如果是高效的音视频通信，WebRTC 是更好的选择。不同的应用场景需要选择合适的实时通信技术，以保证系统的稳定性和性能。]]></description><category></category></item><item><title><![CDATA[「JavaScript深入」轮询（Polling）：基础的实时通信方式]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/146389942</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/146389942</guid><author>XH_jing</author><pubDate>Thu, 20 Mar 2025 11:00:41 +0800</pubDate><description><![CDATA[轮询技术作为实时通讯的基础方案，虽然在新一代技术面前略显陈旧，但在特定场景下仍具有实用价值。开发者应充分理解各种技术的优缺点，根据实际需求选择最合适的解决方案。随着HTTP/3和WebTransport等新技术的发展，实时通讯领域将迎来更多创新和突破。]]></description><category></category></item><item><title><![CDATA[「JavaScript深入」WebSocket：高效的双向实时通信技术]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/146372717</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/146372717</guid><author>XH_jing</author><pubDate>Wed, 19 Mar 2025 16:12:08 +0800</pubDate><description><![CDATA[在现代 Web 开发中，实时通信是许多应用的核心需求，例如在线聊天、实时协作、游戏对战等。WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间建立持久连接，并在双方之间高效地传输数据。]]></description><category></category></item><item><title><![CDATA[「JavaScript深入」Server-Sent Events (SSE)：轻量级实时通信技术]]></title><link>https://blog.youkuaiyun.com/XH_jing/article/details/146369269</link><guid>https://blog.youkuaiyun.com/XH_jing/article/details/146369269</guid><author>XH_jing</author><pubDate>Wed, 19 Mar 2025 15:33:19 +0800</pubDate><description><![CDATA[在现代 Web 应用中，实时数据推送成为了关键需求之一。例如，在股票行情、天气更新、社交通知等应用场景中，客户端需要能够持续接收服务器端的最新数据。Server-Sent Events (SSE) 是一种基于 HTTP 协议的轻量级实时通信技术，能够让服务器主动向客户端推送消息。]]></description><category></category></item></channel></rss>