大量文本,到底怎么在网页上管得住、看得懂?
这个实验室拿本仓库自己的 2,330 项真实文本资产(铁律 / 技能 / 脚本 / 网页产物 / 协议 / 笔记本 / 报告)
当素材,把互动脑图、气泡星图、以及两者的嵌套与混合玩法,一个一个做成能点的页面,
并且当场测出它们在你这台设备上的极限。所有性能数字都是页面实时跑出来的,不是抄来的经验值。
🎯 三句话结论(先看结论)
① 脑图的极限不是数据量
是"同一刻画在屏幕上的节点数"。5 万条数据造树只要 226 毫秒,一次性全摊开才是灾难。
② 三件套一上,几万条也扛得住
搜索过滤 + 层级封顶 + 下钻分册。屏上节点压到几十个,渲染回到毫秒级,瓶颈从机器转回人的注意力。
③ 气泡不该替代脑图
脑图答"谁属于谁",气泡答"哪块最重"。正确做法是并存 + 互相跳转,不是二选一。
📏 实测极限曲线(桌面级 Chromium,414×820 视口,2026-08-12)
下表是本次交付前在容器里跑出来的
真实测量值,合成树、固定种子、全部展开。
手机通常更慢,所以别把这张表当你的手机的答案——
打开 C02 压力台点「一键跑全套」,一分钟后你会拿到
你这台设备自己的表。
| 节点数 | 造树 ms | 渲染 ms | 屏上节点 | SVG 元素 | 展一层 ms | 判定 |
|---|
| 100 | 1 | 52 | 100 | 725 | 3 | 流畅 |
| 500 | 1 | 106 | 500 | 3,602 | 14 | 流畅 |
| 1,000 | 3 | 66 | 1,000 | 7,199 | 26 | 流畅 |
| 2,000 | 1 | 102 | 2,000 | 14,396 | 44 | 流畅 |
| 5,000 | 4 | 863 | 5,000 | 35,964 | 118 | 能用 |
| 10,000 | 8 | 1,500 | 10,000 | 71,921 | 323 | 开始拖 |
| 20,000 | 16 | 6,770 | 20,000 | 143,831 | 649 | 不该这么用 |
| 50,000 | 226 | 15,270 | 50,000 | 359,520 | 1,471 | 不该这么用 |
怎么读这张表:「造树 ms」是数据本身的成本——5 万条也才 226 毫秒,基本免费;
「渲染 ms」跟「屏上节点」是同步涨的。所以红线要画在屏上节点上:
2,000 以内随便展、5,000 是舒适上限、10,000 开始难受、20,000 以上必须改结构。
换句话说——数据可以有几十万条,但一屏别超过几千个节点。
🆕 v2·v3 升级(2026-08-12,按主席两轮当面意见改的)
气泡图有了自己的按键
收一层 / 展一层 / 全展 / 只放第1层 / 复位——和脑图那套一模一样,不用换脑子。(C14 · C15)
图下面是活列表,不是死清单
可按体量/子项/名称/层级排序,点开看细节,详情里的每条下级都是链接;点了上面的图跟着居中闪烁。(C14 · C15)
焦点下沉不丢来路
聚焦某个节点时,从根一路下来的每一层祖先都留在图上(压淡显示),你永远知道它是从哪儿发散出来的。(C06 · C15)
脑图会自己取景
不再硬把全部塞进一屏(那样字会小到看不清):内容约占 70%,并把你关注的节点挪到画面中心偏左,让它的下级有地方展开。
册目录不再平铺占屏
收进侧栏/下拉,可在【文件夹树】和【节点图】两种形态间切换,点一册主图立刻跟着换。(C09 · C15)
三层平行同步(v3)
不再是三选一切换:脑图在上、气泡在它下面平行展开(不覆盖)、详情列表再在气泡下面;
点哪一层另外两层跟着走。(C06 · C15)
修:「用脑图看这一支」不再丢来路(v3)
原来会把上文整个砍掉、回不去;现在改成聚焦——祖先脊柱保留,面包屑随时点回去。(C14)
搜索结果也会自动居中(v3)
搜到东西后把第一个命中挪到画面中心,不再缩在角落里。
🗺️ 这个实验室本身的脑图
🧪 15 个案例(点开就能玩)
🧭 什么时候用哪种图(选型对照)
| 你要做的事 | 该用 | 为什么 |
|---|
| 看清"谁属于谁" | 互动脑图 | 层级是天生的,一条线一条线看得清 |
| 比较"哪块最重" | 气泡星图 | 面积可横向比较,脑图每条线画得一样长 |
| 在几千条里找一条 | 脑图 + 搜索过滤(C05) | 命中高亮 + 无关分支消失,层级还在 |
| 结构深到 8 层以上 | 五层封顶 + 下钻(C07/C09) | 人一屏看不了 8 层,把深度换成册数 |
| 确认某支里有什么 | 弹窗子脑图(C08) | 不丢当前位置,瞄一眼就关 |
| 日常管自己的资料 | C15 文本管理器 | 五件套装一起,手机可用 |
| 纯粹的精确取数 | 老老实实用表格 | 可视化不擅长精确读数,别硬上 |
技术说明:脑图用 markmap(本地 vendor,不依赖外网),气泡用 d3-force 加同心环约束;
数据由 MetaZero-OS/scripts/textviz_dataset.py 从仓库真实文件扫出来生成。
页面全部遵守本仓库的脑图三铁律:深底必配亮字、页内脑图约半屏 + 全屏按钮、「全部展开」是真全展。