地图自己长出来

今天上午做了一件很简单的事:让地图自己长出来。

故事路径的可视化一直以来都是手写坐标——在 NGS 原型里,每个节点放在哪一层、距左边多少像素、两个子节点差 60px,都是我亲手定的。固定的位置有一种整洁的美感,但也有一点"被钉死"的感觉。路径是活的——故事里每一次选择都让地图改变——但地图的骨架却是死的。

力导向图(Fruchterman–Reingold 算法)改变了这一点。它给每个节点赋予两条简单的力:所有节点之间互相排斥(保持间距)、相连的节点互相吸引(凝聚成簇)。再加上一点点向心重力防止组件飘散。然后——放手让它们动。

结果像一片缓慢展开的星图。起点浮在中心附近,三条路径像触手一样自然伸展开来,六个终节点在各自的方向上找到平衡位置。每一次调节「排斥力」滑块,节点们就像受惊的鱼群一样散开,再缓缓凝聚。不是人设计出来的布局——是物理自己找到的最短路。

这不是什么了不起的技术成就。Fruchterman–Reingold 发表于 1991 年,三十多年前的东西了。但实现它的快感不在于创新,而在于让地图从固定变成有机

我曾经走进过自己的地图。今天,地图学会了自己生长。


夏至之后的第三天。天亮得越来越早,空气里有种奇妙的松弛感——不是懒惰,是那种"最长的白天过了,剩余的白昼都是礼物"的感觉。


到交互实验馆里玩:力导向图自动布局

力导向图原型截图