|
17 | 17 | </p> |
18 | 18 |
|
19 | 19 | ## 功能 |
20 | | - |
21 | 20 | - 常见输入格式: |
22 | | - - 边列表 `u v [w]`,表示从节点 `u` 到节点 `v` 的一条边,其中 `w` 是可选的边标签。 |
23 | | - - Leetcode 风格的邻接列表字符串,如 `[[2,4],[1,3],[2,1],[4,3]]`;确保字符串内部**不要**包含空格。 |
24 | | - - 父子数组,其中 `p[i]` 和 `c[i]` 表示从节点 `p[i]` 到 `c[i]` 的边。 |
25 | | - - 假设节点数非零,你还可以标记每个节点。这在你有一个数组 `a` 时很有用,`a[i]` 对应节点 `i` 的值(只需将给定数组复制并粘贴到 **节点标签** 部分)。 |
| 21 | + - 边列表 `u v w`,表示一条从 $u$ 到 $v$,的边,其中边权是 $w$(可选)。 |
| 22 | + - Leetcode 风格的边列表 `[[u1,v1(,w1],[u2,v2,w2]]`,表示同上。确保字符串内部**不要**包含空格。 |
| 23 | + - 父子数组,其中 `p[i]` 和 `c[i]` 表示从节点 $p_i$ 到 $c_i$ 的边。 |
| 24 | + - 在**节点标签**是点权/标签。`a[i]` 表示点 $i$ 的点权/标签为$a_i$。 |
26 | 25 | - 标签偏移(用于将零索引输入转换为一索引,反之亦然) |
27 | | -- 暗黑/亮色主题 |
| 26 | +- 亮/暗色主题 |
28 | 27 | - 无向图/有向图 |
29 | | -- 普通/树/二分图模式 |
30 | | -- 锁定模式(固定标记的节点位置) |
| 28 | +- 树/二分图模式 |
| 29 | +- 锁定模式:固定所有点的位置 |
31 | 30 | - 桥和割点 |
32 | | -- (强连通)分量 |
| 31 | +- 连通分量 |
33 | 32 | - 最小生成树 |
34 | | -- 支持多重边 |
35 | | -- 支持多测试用例 |
| 33 | +- 支持重边 |
| 34 | +- 支持多组样例 |
36 | 35 |
|
37 | 36 | <p align="center"> |
38 | 37 | <img src="screenshots/parentChild.png?" /> |
|
47 | 46 | </p> |
48 | 47 |
|
49 | 48 | <p align="center"> |
50 | | -<em>Leetcode 风格的邻接列表也适用于边</em> |
| 49 | +<em>Leetcode 风格的边列表也可用</em> |
51 | 50 | </p> |
52 | 51 |
|
53 | 52 | > [!NOTE] |
54 | | -> *树模式* 和 *桥* 仅适用于无向图。 |
| 53 | +> *树模式*和*桥*仅适用于无向图。 |
55 | 54 |
|
56 | 55 | ## 使用方法 |
57 | 56 |
|
58 | | -根据需要调整输入格式,然后开始输入! |
| 57 | +根据需要调整输入格式,然后开始输入。 |
59 | 58 |
|
60 | 59 | > [!IMPORTANT] |
61 | | -> 如果你来自像 [Codeforces](https://codeforces.com/) 这样的平台,且输入数据包含 `n m`,分别表示顶点数和边数,请在复制测试用例数据时**省略**这部分内容。 |
62 | | -> 同样,如果你有一个数组 `p`,其中 `p[i]` 表示 `i` 的父节点,请确保父节点数组和子节点数组匹配。 |
| 60 | +> 如果你来自像 [Codeforces](https://codeforces.com/) 这样的OJ,且输入数据包含 `n m`,分别表示顶点数和边数,请在复制样例时**删除**这部分内容。 |
| 61 | +> 同样,如果你有一个数组 $p$,其中 $p_i$ 表示 $i$ 的父节点,请确保父节点数组和子节点数组匹配。 |
63 | 62 |
|
64 | 63 | > [!TIP] |
65 | | -> 若要输入单个节点,输入 `u` 或 `u u`。 |
| 64 | +> 输入 `u` 表示单个点。 |
66 | 65 |
|
67 | 66 | > [!TIP] |
68 | | -> 在输入节点标签时,如果你想跳过某个节点,使用字符 `_` 作为占位符。 |
| 67 | +> 设置点权/标签时,如果点不需要权/标签,使用 `_` 作为占位符。 |
69 | 68 |
|
70 | | -## 处理多个测试用例/图 |
| 69 | +## 处理多个样例 |
71 | 70 |
|
72 | | -要添加一个新的测试用例,点击绿色按钮添加一个新“标签”。你可以将每个测试用例输入到各自的标签中。要删除标签,将鼠标悬停在目标标签上片刻,会显示一个红色的叉号。点击叉号即可删除该标签。 |
| 71 | +点击绿色按钮添加新样例。你可以将样例输入到各各样例中。要删除样例,将鼠标悬停在样例标签上,会显示删除按钮。 |
73 | 72 |
|
74 | 73 | > [!CAUTION] |
75 | | -> 删除标签后,该标签内的所有图数据将被删除,请小心操作。 |
| 74 | +> 删除样例后,该样例内的所有数据将被删除,请小心操作。 |
76 | 75 |
|
77 | 76 | ## 节点着色 |
78 | 77 |
|
79 | | -使用位于主画布上方的调色板,你可以选择颜色,并点击节点后,节点将变为你选择的颜色。 |
| 78 | +使用主画布上方的调色板选择颜色,并点击点着色。 |
80 | 79 |
|
81 | 80 | > [!CAUTION] |
82 | | -> 你的颜色将覆盖由 *连通分量* 或 *二分图模式* 产生的颜色。 |
83 | | -
|
84 | | -调色板左上角的圆形按钮将光标重置为正常模式,而下面的红色圆圈则清除任何已着色的节点。 |
85 | | - |
86 | | -## 配置 |
87 | | - |
88 | | -有两种配置方式:**常规** 和 **外观**,前者处理主要的“模式”,后者让你控制图形的渲染方式。 |
89 | | - |
90 | | -### 常规 |
91 | | - |
92 | | -#### 连通分量 |
93 | | -此模式显示图的连通分量。 |
| 81 | +> **二分图模式**产生的颜色将覆盖你染颜色。 |
94 | 82 |
|
95 | | -> [!NOTE] |
96 | | -> 对于有向图,**强连通分量** 会被显示。 |
97 | | -
|
98 | | -连通分量通过不同的颜色进行区分。 |
| 83 | +## 设置 |
99 | 84 |
|
100 | | -#### 桥和割点 |
| 85 | +有三个设置面板:**模式**,**算法**,**外观**。分别设置:图与编辑器,显示算法,渲染方式。 |
101 | 86 |
|
102 | | -*桥* 是指移除后会增加图的连通分量的边。*割点*(也称为关节点)定义类似。 |
| 87 | +### 模式 |
103 | 88 |
|
104 | | -桥接通过两条平行线表示,而割点则采用六边形形状。 |
| 89 | +#### 标签偏移量 |
105 | 90 |
|
106 | | -#### 最小生成树(森林) |
107 | | - |
108 | | -如果提供了*所有*边的权重,并且它们为数值类型,则此模式可用。对于每个分量,计算最小生成树,最小生成树中的边会加粗显示。 |
109 | | - |
110 | | -<p align="center"> |
111 | | - <img src="screenshots/mst.png?" /> |
112 | | -</p> |
113 | | - |
114 | | -<p align="center"> |
115 | | -<em>最小生成树</em> |
116 | | -</p> |
| 91 | +字面意思。 |
117 | 92 |
|
118 | 93 | #### 树模式 |
119 | 94 |
|
120 | | -在此模式下,输入数据中的*第一个*节点成为根节点。节点根据它们在树层次中的位置进行排列,以便更易于可视化。 |
| 95 | +在此模式下,输入数据中的**第一个**节点成为根节点。节点根据它们在树层次中的位置进行排列,以便更易于可视化。 |
121 | 96 |
|
122 | 97 | <p align="center"> |
123 | 98 | <img src="screenshots/twoRootBefore.png?" /> |
124 | 99 | </p> |
125 | 100 |
|
126 | 101 | <p align="center"> |
127 | | -<em>节点1是原根节点</em> |
| 102 | +<em>节点1是根节点</em> |
128 | 103 | </p> |
129 | 104 |
|
130 | 105 | 要设置某个任意的根节点(例如节点2),在 *根节点* 部分输入 `2`,它就会成为树的根。如果有多个树,只需输入逗号分隔的所有根节点。如果输入的两个节点属于同一棵树,那么输入顺序较前的节点会作为根节点,即若输入 `2 1`,节点2为根;若输入 `1 2`,则节点1为根。 |
|
147 | 122 | <em>显示桥和割点的 DFS 树</em> |
148 | 123 | </p> |
149 | 124 |
|
150 | | -#### 二分图模式 |
| 125 | +#### 二分图模式(仅对二分图有效) |
151 | 126 |
|
152 | | -也可以显示二分图。每个不相交的集合中的节点都会被着色(和定位)得不同。 |
| 127 | +显示二分图。每个不相交的集合中的节点都会被着色和位置得不同。 |
153 | 128 |
|
154 | 129 | <p align="center"> |
155 | 130 | <img src="screenshots/bipartite.png?" /> |
|
165 | 140 | > [!TIP] |
166 | 141 | > 如果图不是二分图,则此模式不可用。 |
167 | 142 |
|
| 143 | +#### 方格模式 |
| 144 | + |
| 145 | +把图显示为方格。 |
| 146 | + |
168 | 147 | #### 锁定模式 |
169 | 148 |
|
170 | | -默认情况下,图处于 *力学模式*,即边将节点联系在一起,而节点相互排斥,形成类似太空的效果。要禁用此行为,只需切换到 *锁定模式*。 |
| 149 | +固定所有点的位置。 |
171 | 150 |
|
172 | | -#### 点击标记/取消标记节点 |
| 151 | +#### 点击时标记节点 |
173 | 152 |
|
174 | | -启用后,你可以通过点击节点来 *标记* 它们。这些节点会有双重边框。 |
| 153 | +标记点,这些点会有双重边框。 |
175 | 154 |
|
176 | | -> [!TIP] |
177 | | -> 如果你更喜欢给节点上色,可能需要禁用此功能。 |
| 155 | +#### 固定模式(需要与点击时标记节点同时启用) |
| 156 | + |
| 157 | +固定标记的点的位置。 |
| 158 | + |
| 159 | +#### 重边模式 |
| 160 | + |
| 161 | +允许重边。 |
| 162 | + |
| 163 | +#### 边的弯曲效果 |
178 | 164 |
|
179 | | -#### 固定模式 |
| 165 | +允许边弯曲。 |
| 166 | + |
| 167 | +### 算法 |
| 168 | + |
| 169 | +#### 连通分量 |
| 170 | + |
| 171 | +此模式显示图的连通分量,通过不同的颜色进行区分 |
| 172 | + |
| 173 | +> [!NOTE] |
| 174 | +> 对于有向图,显示**强连通分量**。 |
| 175 | +
|
| 176 | +#### 边双联通分量 |
| 177 | + |
| 178 | +显示边双联通分量,通过不同的颜色进行区分 |
| 179 | + |
| 180 | +#### 点双联通分量 |
| 181 | + |
| 182 | +显示点双联通分量,通过不同的颜色进行区分 |
| 183 | + |
| 184 | +#### 割点和桥 |
| 185 | + |
| 186 | +显示割点和桥。 |
| 187 | + |
| 188 | +**桥**是指移除后会增加图的连通分量的边。**割点**定义类似。 |
| 189 | + |
| 190 | +桥接通过两条平行线表示,而割点则采用六边形形状。 |
| 191 | + |
| 192 | +#### 最小生成树(森林) |
| 193 | + |
| 194 | +如果提供了**所有**边权且为数值,则此模式可用。对于每个分量,计算最小生成树,最小生成树中的边会加粗显示。 |
| 195 | + |
| 196 | +<p align="center"> |
| 197 | + <img src="screenshots/mst.png?" /> |
| 198 | +</p> |
| 199 | + |
| 200 | +<p align="center"> |
| 201 | +<em>最小生成树</em> |
| 202 | +</p> |
180 | 203 |
|
181 | | -如果你希望固定 *标记的节点* 位置,请启用 *固定模式*。 |
182 | 204 |
|
183 | | -#### 多重边模式 |
| 205 | +#### 重边模式 |
184 | 206 |
|
185 | | -此模式允许在两个节点之间有多条边,默认启用。当禁用时,不论输入多少次相同的边,只会注册一条。 |
| 207 | +此模式允许在重边,默认启用。当禁用时,不论输入多少次相同的边,只会显示一条。 |
186 | 208 |
|
187 | 209 | ### 外观 |
188 | 210 |
|
189 | | -除了暗黑/亮色主题,还有多个滑块可以调整节点半径、字体大小等参数。你的设置会在刷新后保存在 `localStorage` 中。 |
| 211 | +除了亮/暗色主题,还可以调整节点半径、字体大小等参数。你的设置会在刷新后保存在 `localStorage` 中。 |
190 | 212 |
|
191 | 213 | ## 部署 |
192 | 214 | - 下载本项目 |
|
0 commit comments