<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Posts on 进击的骑士</title>
    <link>https://knight134.com/posts/</link>
    <description>Recent content in Posts on 进击的骑士</description>
    <generator>Hugo</generator>
    <language>zh-cn</language>
    <lastBuildDate>Fri, 01 May 2026 10:00:00 +0800</lastBuildDate>
    <atom:link href="https://knight134.com/posts/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Linux 基本操作指南</title>
      <link>https://knight134.com/posts/2026-05-01-linux2/</link>
      <pubDate>Fri, 01 May 2026 10:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2026-05-01-linux2/</guid>
      <description>&lt;h2 id=&#34;linux基本操作&#34;&gt;linux基本操作&lt;/h2&gt;
&lt;p&gt;linux下的基本操作能力，介绍基本概念和简单操作&lt;/p&gt;
&lt;h3 id=&#34;关键词&#34;&gt;关键词&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;cd ls top who less vim df du mv rm scp su&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;世界观&#34;&gt;世界观&lt;/h3&gt;
&lt;h4 id=&#34;文件&#34;&gt;文件&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;linux下的一切资源以文件形式存在，整个系统由文件组成。文件是一段可读写的存储空间，其中存放了数据。
&lt;ul&gt;
&lt;li&gt;普通文件。二进制文件 文本文件&lt;/li&gt;
&lt;li&gt;特殊文件。目录文件 链接文件 设备文件&lt;/li&gt;
&lt;li&gt;命令是程序，程序是可执行文件。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;文件系统。linux下的所有文件都在一个以根节点(/)出发的树上。
&lt;img loading=&#34;lazy&#34; src=&#34;https://knight134.com/images/posts/src/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F.png&#34;&gt;
&lt;ul&gt;
&lt;li&gt;以/开始的路径为绝对路径&lt;/li&gt;
&lt;li&gt;以当前路径为起点的文件路径为相对路径&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&#34;行&#34;&gt;行&lt;/h4&gt;
&lt;p&gt;行的概念非常重要，是linux世界的基本功能单位。
&lt;img loading=&#34;lazy&#34; src=&#34;https://knight134.com/images/posts/src/%E4%BF%84%E7%BD%97%E6%96%AF.jpeg&#34;&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;定义。一段字符序列加上一个换行符组成一个行
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;Windows的换行符是 windows下换行符是\r\n \r回车,\n换行
linux 下的换行符是 \n
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;差异。n 的意思是next，也就是下一行，但是在机械打字机中，下一行打字指针在行尾，所以启用新行还有一个将指针拨向行首的动作。猜测windows可能继承自dos时代的机械打字机操作，而更晚的linux不再考虑打字机的操作习惯了。&lt;/li&gt;
&lt;li&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://knight134.com/images/posts/src/%E5%9B%9E%E8%BD%A6%E6%8D%A2%E8%A1%8C.gif&#34;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&#34;命令&#34;&gt;命令&lt;/h4&gt;
&lt;p&gt;linux中的命令也是一个可执行文件&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;命令结构。
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;$ ls -l /home/test
&lt;/code&gt;&lt;/pre&gt;&lt;ul&gt;
&lt;li&gt;一个完整的命令占用一行，由换行键触发执行。&lt;/li&gt;
&lt;li&gt;命令前的字符为命令输入提示符。&lt;/li&gt;
&lt;li&gt;命令由命令和参数组成。由空白进行分隔。
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;通常由空格来分隔一行中的内容，这样一行中的各个部分具有不同的含义。
第一部分为命令名
第二到n部分为参数
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;参数为命令要作用的对象，或者命令起作用的一些控制项。参数分为命名参数和匿名参数
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;命名参数由参数名和参数值组成，如果是开关参数则没有参数值
以 - 开始的部分为参数名，其后面跟的部分为参数值
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;命令的输出。
&lt;img loading=&#34;lazy&#34; src=&#34;https://knight134.com/images/posts/src/%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA.png&#34;&gt;
&lt;ul&gt;
&lt;li&gt;每个命令默认会打开2个数据输出通道，分别为标准输出和标准错误输出（stdout stderr)，这两个通道绑定的输出设备默认为屏幕。
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;两个数据流通道是系统默认打开的文件对象，编号分别为1和2。系统每打开一个文件，就分配一个这样的文件对象编号。(编号0 是标准输入：键盘)
程序正常输出的信息走1 ，错误的信息走2。至于什么是错误信息，大部分是操作系统定义，也可以由程序自身定义
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;重定位数据通道到指定文件。
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;1&amp;gt;log.o 2&amp;gt;log.e
其中 &amp;gt;log.o 是 1&amp;gt;log.o的简写
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;重定位数据通道到其他通道上去
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;2&amp;gt;&amp;amp;1 
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;li&gt;重定位数据通道到其他指令上去
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code&gt;ll|wc -l
|称为管道连接符，上一个命令的输出是下一个命令的输入
&lt;/code&gt;&lt;/pre&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;生存&#34;&gt;生存&lt;/h3&gt;
&lt;p&gt;linux世界基本生存操作&lt;/p&gt;</description>
    </item>
    <item>
      <title>个人技术栈整合：从爬虫到可视化全流程</title>
      <link>https://knight134.com/posts/2024-05-20-project-summary/</link>
      <pubDate>Mon, 20 May 2024 15:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-20-project-summary/</guid>
      <description>&lt;p&gt;最近完成了一个小项目：利用 Python 爬虫抓取天气数据，存入 MySQL，然后用 Pandas 进行分析，最后通过前端 Echarts 展示趋势图。
这个项目串联了我目前学习的几个核心模块，非常有成就感。下一步计划引入机器学习模型对天气进行预测。&lt;/p&gt;</description>
    </item>
    <item>
      <title>二叉树遍历：递归与迭代的博弈</title>
      <link>https://knight134.com/posts/2024-05-19-algorithm-tree/</link>
      <pubDate>Sun, 19 May 2024 13:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-19-algorithm-tree/</guid>
      <description>&lt;p&gt;二叉树的遍历是基础中的基础。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;前序遍历&lt;/strong&gt;：根 -&amp;gt; 左 -&amp;gt; 右&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;中序遍历&lt;/strong&gt;：左 -&amp;gt; 根 -&amp;gt; 右&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;后序遍历&lt;/strong&gt;：左 -&amp;gt; 右 -&amp;gt; 根&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;递归写法虽然简洁，但在面试中往往会被要求用迭代（栈）来实现，需要多加练习。&lt;/p&gt;</description>
    </item>
    <item>
      <title>使用 Docker 容器化部署 Hugo 静态网站</title>
      <link>https://knight134.com/posts/2024-05-18-docker-hugo/</link>
      <pubDate>Sat, 18 May 2024 09:30:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-18-docker-hugo/</guid>
      <description>&lt;p&gt;虽然 Hugo 是静态网站，但有时候为了统一环境，也可以用 Nginx 镜像配合 Docker 来部署。
这样可以确保在任何机器上都能一键跑起来，避免了“在我机器上能跑”的尴尬。&lt;/p&gt;</description>
    </item>
    <item>
      <title>SQL 查询优化：EXPLAIN 命令的妙用</title>
      <link>https://knight134.com/posts/2024-05-17-sql-optimization/</link>
      <pubDate>Fri, 17 May 2024 16:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-17-sql-optimization/</guid>
      <description>&lt;p&gt;当数据量达到百万级时，一条慢查询足以拖垮整个服务。学会使用 &lt;code&gt;EXPLAIN&lt;/code&gt; 来分析 SQL 执行计划是必备技能。
主要关注 &lt;code&gt;type&lt;/code&gt; 列，如果是 &lt;code&gt;ALL&lt;/code&gt; 表示全表扫描，需要优化索引。&lt;/p&gt;</description>
    </item>
    <item>
      <title>技术人的五一假期复盘</title>
      <link>https://knight134.com/posts/2024-05-16-daily-log/</link>
      <pubDate>Thu, 16 May 2024 08:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-16-daily-log/</guid>
      <description>&lt;p&gt;五一假期没有出去人挤人，而是宅在家里把《动手学深度学习》的前三章刷完了。
感觉数学基础还是有点薄弱，尤其是矩阵微积分的部分。接下来的计划是每天坚持 LeetCode 刷题，保持手感。&lt;/p&gt;</description>
    </item>
    <item>
      <title>PyTorch 基础：张量（Tensor）操作详解</title>
      <link>https://knight134.com/posts/2024-05-15-pytorch-basics/</link>
      <pubDate>Wed, 15 May 2024 11:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-15-pytorch-basics/</guid>
      <description>&lt;p&gt;PyTorch 是当前最流行的深度学习框架之一。一切的基础都是 Tensor（张量）。&lt;/p&gt;
&lt;h3 id=&#34;创建张量&#34;&gt;创建张量&lt;/h3&gt;
&lt;p&gt;python&lt;/p&gt;
&lt;p&gt;import torch&lt;/p&gt;
&lt;p&gt;创建一个 2x3 的随机张量&lt;/p&gt;
&lt;p&gt;x = torch.rand(2, 3)&lt;/p&gt;
&lt;p&gt;print(x)&lt;/p&gt;
&lt;h2 id=&#34;查看形状&#34;&gt;查看形状&lt;/h2&gt;
&lt;p&gt;print(x.shape)&lt;/p&gt;</description>
    </item>
    <item>
      <title>前端可视化：Echarts 与 D3.js 的选型思考</title>
      <link>https://knight134.com/posts/2024-05-14-frontend-viz/</link>
      <pubDate>Tue, 14 May 2024 14:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-14-frontend-viz/</guid>
      <description>&lt;p&gt;最近在做个人项目的数据展示模块，纠结于使用 Echarts 还是 D3.js。&lt;/p&gt;
&lt;h3 id=&#34;echarts-的优势&#34;&gt;Echarts 的优势&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;开箱即用&lt;/strong&gt;：配置项清晰，文档友好（中文支持好）。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;图表丰富&lt;/strong&gt;：涵盖了几乎所有常见的商业图表。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;d3js-的优势&#34;&gt;D3.js 的优势&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;灵活性极高&lt;/strong&gt;：基于 SVG，可以做到像素级的定制。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;数据驱动&lt;/strong&gt;：真正理解了数据与 DOM 元素绑定。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;结论&#34;&gt;结论&lt;/h3&gt;
&lt;p&gt;对于快速交付和常规报表，选 &lt;strong&gt;Echarts&lt;/strong&gt;；对于高度定制化的数据艺术展示，选 &lt;strong&gt;D3.js&lt;/strong&gt;。&lt;/p&gt;</description>
    </item>
    <item>
      <title>使用 Pandas 进行数据清洗实战</title>
      <link>https://knight134.com/posts/2024-05-12-data-analysis-pandas/</link>
      <pubDate>Sun, 12 May 2024 10:30:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-12-data-analysis-pandas/</guid>
      <description>&lt;p&gt;在数据分析的工作中，80% 的时间都在做数据清洗。今天记录一下使用 Pandas 处理缺失值和异常值的常用技巧。&lt;/p&gt;
&lt;h3 id=&#34;处理缺失值&#34;&gt;处理缺失值&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;dropna()&lt;/code&gt;：直接丢弃含有缺失值的行。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fillna()&lt;/code&gt;：用均值、中位数或特定值填充。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;数据透视表&#34;&gt;数据透视表&lt;/h3&gt;
&lt;p&gt;Pandas 的 &lt;code&gt;pivot_table&lt;/code&gt; 类似于 Excel 的数据透视表，非常强大。
python&lt;/p&gt;
&lt;p&gt;import pandas as pd&lt;/p&gt;
&lt;p&gt;df = pd.read_csv(&amp;lsquo;data.csv&amp;rsquo;)&lt;/p&gt;
&lt;p&gt;table = pd.pivot_table(df, values=&amp;lsquo;sales&amp;rsquo;, index=&amp;lsquo;region&amp;rsquo;, columns=&amp;lsquo;year&amp;rsquo;, aggfunc=&amp;lsquo;sum&amp;rsquo;)&lt;/p&gt;
&lt;p&gt;print(table)&lt;/p&gt;</description>
    </item>
    <item>
      <title>机器学习入门：从零开始的炼丹之路</title>
      <link>https://knight134.com/posts/2024-05-10-ml-intro/</link>
      <pubDate>Fri, 10 May 2024 09:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/2024-05-10-ml-intro/</guid>
      <description>&lt;h2 id=&#34;什么是机器学习&#34;&gt;什么是机器学习？&lt;/h2&gt;
&lt;p&gt;机器学习是人工智能的一个分支，它使计算机能够在没有明确编程的情况下学习。简单来说，就是让机器从数据中寻找规律。&lt;/p&gt;
&lt;h2 id=&#34;我的学习路径&#34;&gt;我的学习路径&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;基础理论&lt;/strong&gt;：吴恩达老师的课程是必看的。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;工具库&lt;/strong&gt;：熟练使用 &lt;code&gt;NumPy&lt;/code&gt; 和 &lt;code&gt;Pandas&lt;/code&gt; 处理数据。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;实战&lt;/strong&gt;：从 Kaggle 的经典赛题开始，比如 Titanic 生存预测。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&#34;代码示例&#34;&gt;代码示例&lt;/h2&gt;
&lt;p&gt;python&lt;/p&gt;
&lt;p&gt;from sklearn.linear_model import LogisticRegression&lt;/p&gt;
&lt;p&gt;model = LogisticRegression()&lt;/p&gt;
&lt;h2 id=&#34;模拟训练数据&#34;&gt;模拟训练数据&lt;/h2&gt;
&lt;p&gt;X = [[0], [1], [2]]&lt;/p&gt;
&lt;p&gt;y = [0, 1, 1]&lt;/p&gt;
&lt;p&gt;model.fit(X, y)&lt;/p&gt;
&lt;p&gt;print(f&amp;quot;预测结果: {model.predict([[1.5]])}&amp;quot;)&lt;/p&gt;</description>
    </item>
    <item>
      <title>我的技术探索之旅：从数据分析到前端可视化</title>
      <link>https://knight134.com/posts/my-first-post/</link>
      <pubDate>Mon, 15 Jan 2024 10:00:00 +0800</pubDate>
      <guid>https://knight134.com/posts/my-first-post/</guid>
      <description>&lt;p&gt;这里是你的文章内容。你可以愉快地使用 &lt;strong&gt;Markdown&lt;/strong&gt; 语法。&lt;/p&gt;
&lt;h3 id=&#34;我的第一个数据可视化项目&#34;&gt;我的第一个数据可视化项目&lt;/h3&gt;
&lt;p&gt;比如，你可以直接把你在 Jupyter Notebook 里生成的前端可视化代码（HTML/JS）直接粘贴在这里：&lt;/p&gt;
&lt;div id=&#34;my-chart&#34; style=&#34;width: 600px; height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;&#34;&gt;
&lt;!------
&lt;!DOCTYPE html&gt;
&lt;html lang=&#34;en&#34;&gt;
&lt;head&gt;
    &lt;meta charset=&#34;UTF-8&#34;&gt;
    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt;
    &lt;title&gt;D3.js Solar System&lt;/title&gt;
    &lt;script src=&#34;https://d3js.org/d3.v7.min.js&#34;&gt;&lt;/script&gt;
    &lt;style&gt;
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
            overflow: hidden; /* 防止滚动条出现 */
        }
        .solar-system {
            width: 800px;
            height: 800px;
        }
        /* 星空背景 */
        .stars {
            fill: white;
            opacity: 0.8;
        }
        /* 行星公转动画 */
        @keyframes orbit {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .orbit {
            animation: orbit linear infinite;
            transform-origin: center center;
        }
        /* 行星自转动画 */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }
        .planet-spin {
            animation: spin linear infinite;
            transform-origin: center center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;div id=&amp;quot;solar-system-container&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;

&amp;lt;script&amp;gt;
    // 1. 定义太阳系数据
    const solarSystem = {
        sun: { radius: 40, color: &amp;quot;#FDB813&amp;quot; },
        planets: [
            { name: &amp;quot;水星&amp;quot;, radius: 8, color: &amp;quot;#A9A9A9&amp;quot;, distance: 100, orbitDuration: 4, spinDuration: 10 },
            { name: &amp;quot;金星&amp;quot;, radius: 12, color: &amp;quot;#FFC649&amp;quot;, distance: 160, orbitDuration: 8, spinDuration: 20 },
            { name: &amp;quot;地球&amp;quot;, radius: 14, color: &amp;quot;#6B93D6&amp;quot;, distance: 220, orbitDuration: 12, spinDuration: 5 },
            { name: &amp;quot;火星&amp;quot;, radius: 10, color: &amp;quot;#FF4D4D&amp;quot;, distance: 280, orbitDuration: 16, spinDuration: 15 },
            { name: &amp;quot;木星&amp;quot;, radius: 30, color: &amp;quot;#FFA726&amp;quot;, distance: 380, orbitDuration: 24, spinDuration: 3 },
            { name: &amp;quot;土星&amp;quot;, radius: 26, color: &amp;quot;#FFD95A&amp;quot;, distance: 480, orbitDuration: 30, spinDuration: 4, hasRing: true },
            { name: &amp;quot;天王星&amp;quot;, radius: 20, color: &amp;quot;#4FD0E7&amp;quot;, distance: 580, orbitDuration: 40, spinDuration: 8 },
            { name: &amp;quot;海王星&amp;quot;, radius: 20, color: &amp;quot;#4B70DD&amp;quot;, distance: 680, orbitDuration: 50, spinDuration: 10 }
        ]
    };

    // 2. 创建 SVG 画布
    const width = 800;
    const height = 800;
    const centerX = width / 2;
    const centerY = height / 2;

    const svg = d3.select(&amp;quot;#solar-system-container&amp;quot;)
        .append(&amp;quot;svg&amp;quot;)
        .attr(&amp;quot;width&amp;quot;, width)
        .attr(&amp;quot;height&amp;quot;, height)
        .attr(&amp;quot;viewBox&amp;quot;, `0 0 ${width} ${height}`)
        .attr(&amp;quot;preserveAspectRatio&amp;quot;, &amp;quot;xMidYMid meet&amp;quot;)
        .classed(&amp;quot;solar-system&amp;quot;, true);

    // 3. 绘制背景星空
    const starsCount = 200;
    const starsData = Array.from({ length: starsCount }, () =&amp;gt; ({
        x: Math.random() * width,
        y: Math.random() * height,
        r: Math.random() * 1.5
    }));

    svg.selectAll(&amp;quot;.star&amp;quot;)
        .data(starsData)
        .enter()
        .append(&amp;quot;circle&amp;quot;)
        .attr(&amp;quot;class&amp;quot;, &amp;quot;stars&amp;quot;)
        .attr(&amp;quot;cx&amp;quot;, d =&amp;gt; d.x)
        .attr(&amp;quot;cy&amp;quot;, d =&amp;gt; d.y)
        .attr(&amp;quot;r&amp;quot;, d =&amp;gt; d.r);

    // 4. 绘制太阳
    svg.append(&amp;quot;circle&amp;quot;)
        .attr(&amp;quot;cx&amp;quot;, centerX)
        .attr(&amp;quot;cy&amp;quot;, centerY)
        .attr(&amp;quot;r&amp;quot;, solarSystem.sun.radius)
        .attr(&amp;quot;fill&amp;quot;, solarSystem.sun.color)
        .attr(&amp;quot;filter&amp;quot;, &amp;quot;url(#glow)&amp;quot;); // 添加发光滤镜

    // 5. 绘制行星及其轨道
    const planetGroups = svg.selectAll(&amp;quot;.planet-group&amp;quot;)
        .data(solarSystem.planets)
        .enter()
        .append(&amp;quot;g&amp;quot;)
        .attr(&amp;quot;class&amp;quot;, &amp;quot;planet-group&amp;quot;)
        .attr(&amp;quot;transform&amp;quot;, `translate(${centerX}, ${centerY})`);
    
    // 轨道线
    planetGroups.append(&amp;quot;circle&amp;quot;)
        .attr(&amp;quot;class&amp;quot;, &amp;quot;orbit&amp;quot;)
        .attr(&amp;quot;r&amp;quot;, d =&amp;gt; d.distance)
        .attr(&amp;quot;fill&amp;quot;, &amp;quot;none&amp;quot;)
        .attr(&amp;quot;stroke&amp;quot;, &amp;quot;rgba(255, 255, 255, 0.2)&amp;quot;)
        .attr(&amp;quot;stroke-width&amp;quot;, 1)
        .style(&amp;quot;animation-duration&amp;quot;, d =&amp;gt; `${d.orbitDuration}s`);

    // 行星本体
    const planets = planetGroups.append(&amp;quot;g&amp;quot;)
        .attr(&amp;quot;class&amp;quot;, &amp;quot;planet-spin&amp;quot;)
        .style(&amp;quot;animation-duration&amp;quot;, d =&amp;gt; `${d.spinDuration}s`);

    planets.append(&amp;quot;circle&amp;quot;)
        .attr(&amp;quot;cx&amp;quot;, d =&amp;gt; d.distance)
        .attr(&amp;quot;cy&amp;quot;, 0)
        .attr(&amp;quot;r&amp;quot;, d =&amp;gt; d.radius)
        .attr(&amp;quot;fill&amp;quot;, d =&amp;gt; d.color);
    
    // 土星环
    planets.filter(d =&amp;gt; d.hasRing)
        .append(&amp;quot;ellipse&amp;quot;)
        .attr(&amp;quot;cx&amp;quot;, d =&amp;gt; d.distance)
        .attr(&amp;quot;cy&amp;quot;, 0)
        .attr(&amp;quot;rx&amp;quot;, d =&amp;gt; d.radius * 2.5)
        .attr(&amp;quot;ry&amp;quot;, d =&amp;gt; d.radius * 0.5)
        .attr(&amp;quot;fill&amp;quot;, &amp;quot;none&amp;quot;)
        .attr(&amp;quot;stroke&amp;quot;, d =&amp;gt; d3.color(d.color).brighter(0.5))
        .attr(&amp;quot;stroke-width&amp;quot;, 3)
        .attr(&amp;quot;opacity&amp;quot;, 0.8)
        .attr(&amp;quot;transform&amp;quot;, `rotate(-20, ${d =&amp;gt; d.distance}, 0)`);

    // 6. 添加太阳光晕滤镜
    const defs = svg.append(&amp;quot;defs&amp;quot;);
    const filter = defs.append(&amp;quot;filter&amp;quot;)
        .attr(&amp;quot;id&amp;quot;, &amp;quot;glow&amp;quot;)
        .attr(&amp;quot;x&amp;quot;, &amp;quot;-50%&amp;quot;)
        .attr(&amp;quot;y&amp;quot;, &amp;quot;-50%&amp;quot;)
        .attr(&amp;quot;width&amp;quot;, &amp;quot;200%&amp;quot;)
        .attr(&amp;quot;height&amp;quot;, &amp;quot;200%&amp;quot;);
    
    filter.append(&amp;quot;feGaussianBlur&amp;quot;)
        .attr(&amp;quot;stdDeviation&amp;quot;, &amp;quot;8&amp;quot;)
        .attr(&amp;quot;result&amp;quot;, &amp;quot;coloredBlur&amp;quot;);
        
    const feMerge = filter.append(&amp;quot;feMerge&amp;quot;);
    feMerge.append(&amp;quot;feMergeNode&amp;quot;).attr(&amp;quot;in&amp;quot;, &amp;quot;coloredBlur&amp;quot;);
    feMerge.append(&amp;quot;feMergeNode&amp;quot;).attr(&amp;quot;in&amp;quot;, &amp;quot;SourceGraphic&amp;quot;);

&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
------&gt;
&lt;!-- 1. 样式部分：直接写在这里，或者放在文章的 &lt;head&gt; 里 --&gt;
&lt;!-----------------
&lt;style&gt;
    /* 星空背景，覆盖父容器的灰色背景 */
    #my-chart {
        background-color: #000 !important; /* 强制变黑，配合太空主题 */
        position: relative;
        overflow: hidden;
    }
    /* 星空点点 */
    .stars {
        fill: white;
        opacity: 0.8;
    }
    /* 行星公转动画 */
    @keyframes orbit {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .orbit {
        animation: orbit linear infinite;
        transform-origin: center center;
    }
    /* 行星自转动画 */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(-360deg); }
    }
    .planet-spin {
        animation: spin linear infinite;
        transform-origin: center center;
    }
&lt;/style&gt;
--------------&gt;
&lt;!-- 2. 内容容器（保留你的原ID，但清空内容） --&gt;
&lt;p&gt;/*&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
