Fantasy-Map-Generator v1.86.0 多父系层级视图:如何用多 Origin 链接表达文化与宗教的复杂谱系 前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载导读Fantasy-Map-GeneratorFMG内置了一个树状层级视图用于展示文化与宗教的起源Origin关系但传统树结构要求每个节点只能有一个父节点无法表达一种文化/宗教受多个源头影响的真实谱系。本文以 v1.86.0 版本更新为核心讲解 FMG 如何在不破坏树结构的前提下引入多父系Multi-parental链接一个元素可以拥有多个 Origin第一个为 Primary Origin 决定树的挂接位置其余为 Secondary Origin 以虚线独立渲染并介绍宗教生成器新增的多起源生成逻辑、层级视图的编辑交互与底层 D3 实现原理。读完本文你将掌握在 FMG 中管理复杂谱系、通过拖拽/编辑器设置多父系链接以及理解origins字段在数据模型与生成管线中的完整作用。背景为什么树结构表达不了真实谱系树结构的天然限制单父约束FMG 的层级视图本质上是一棵用 D3 的stratifytree布局构建的树。树的定义决定了每个节点元素只能有一个父节点否则无法正确布局。正如 v1.86.0 更新说明所指出的这个树状视图已经存在了好几年但使用场景始终受限根源就在于单父约束——文化、宗教的起源往往是多元的单一父节点无法准确表达。v1.86.0 的解法Primary Secondary 双通道渲染v1.86.0 引入的改动相对较小但意义重大允许为每个元素添加额外的父节点Origin。这些次级链接Secondary Links与树结构完全解耦——它们独立于主树进行渲染不会影响树的构建与布局。这样既保留了树的清晰骨架又能表达多源谱系代价是当次级链接大量堆积时视图会变得混乱正如更新说明中的提醒display can quickly get messy once lots of secondary links are added。从数据模型看每个元素的origins是一个(number | null)[]数组第一个元素决定主树挂接Primary Origin后续元素全部是次级起源。这一结构在 hierarchy-tree.ts 中被正式定义为HierarchyElementtype HierarchyElement { i: number; name: string; code?: string; color?: string; cells?: number; removed?: boolean; origins: (number | null)[]; [key: string]: unknown; };数据模型origins数组的语义与清洗规则每个元素可以拥有多个 OriginPrimary Originorigins[0]决定该节点在树中挂到哪个父节点下参与树布局Secondary Originsorigins[1..n]额外的父级链接由 getSecondaryLinks 从origins.slice(1)中提取以虚线独立渲染根元素i 0的 origins 被规范化为[null]。cleanupOrigins的三条兜底规则层级视图打开时会先对数据做清洗cleanupOrigins保证树可构建function cleanupOrigins(elements: HierarchyElement[]): HierarchyElement[] { const existingElements elements.filter(d !d.removed); return existingElements.map(d { if (d.i 0) d.origins [null]; // root element else if (!d.origins.length) d.origins [0]; else if (!existingElements.find(el d.origins[0] el.i)) d.origins [0]; return d; }); }规则说明根元素i 0强制origins [null]空 origins的元素回退为[0]挂到根Primary Origin 已失效指向不存在的元素的元素同样回退为[0]。只有validElements.length 3时才打开视图否则提示Not enough ${type} to show hierarchy见 open。此外树构建通过stratify().parentId(d d.origins[0] null ? null : String(d.origins[0]))只取 Primary OrigingetRoot若数据存在环等结构问题会抛出提示并回退到上一次的树。核心实现多父系链接如何在 D3 树中独立渲染双通道 SVG 分组层级视图的 SVG 模板将连线分成两个ginsertHtmlg idhierarchyTree_links fillnone stroke#aaa g idhierarchyTree_linksPrimary/g g idhierarchyTree_linksSecondary stroke-dasharray1/g /gPrimary 连线为实线Secondary 连线通过stroke-dasharray1呈现为虚线在视觉上明确区分树骨架与次级谱系关系。次级链接的提取算法getSecondaryLinks 遍历树的所有后代节点对每个节点从origins[1]开始收集额外父级若父节点存在于树中则生成链接function getSecondaryLinks(root: any): { source: any; target: any }[] { const nodes root.descendants(); const links: { source: any; target: any }[] []; for (const node of nodes) { const origins node.data.origins; for (let i 1; i origins.length; i) { const source nodes.find((n: any) n.data.i origins[i]); if (source) links.push({ source, target: node }); } } return links; }布局排序如何照顾次级链接树布局前会按 getSortIndex 对兄弟节点排序若某子树没有任何次级起源保持原有顺序否则按其后代所有次级起源的平均值排序。这能让拥有次级链接的节点尽量靠近其额外父级缓解连线交叉。连线路径本身是一段贝塞尔曲线getLinkPath主、次链接共用同一条路径生成逻辑只是分组与样式不同。交互操作编辑多父系链接的三种方式方式一节点详情面板的 Origins 编辑点击任一非根节点右侧详情面板会出现Origins区域见 selectElement每个 Origin 渲染为一个按钮.hierarchyTree_selectedOrigin鼠标悬停提示Primary origin / Secondary origin: name. Click to remove link to that origin点击按钮可删除该 Origin 链接若删除后 origins 为空自动回退为[0]面板同时允许修改节点的三字符缩写Abbreviationmaxlength3。方式二Edit 按钮弹出Select origins对话框点击 Edit 后弹出 Select origins 对话框顶部有一行radioTop level或某个元素用于设置Primary Origin其余元素通过checkbox勾选作为Secondary Origins加入点击 Select 后执行dataElement.origins [primary, ...secondary]并立即重绘为防止成环可选项已剔除该节点自身后代descendants中的元素不可被选为父级。方式三直接拖拽节点到另一个节点悬停任意节点时提示Drag to other node to add parent, click to edit对应 dragToReorigin拖拽过程中会绘制一条带箭头的虚线#hierarchyTree_dragLine松手时若目标是合法的新父级则将目标元素push进被拖元素的原生origins注意这里 push 的是次级 Origin当被拖元素当前 Primary 是根元素0时先清空origins再 push三重合法性校验不能拖到自己、不能拖到已有 Origin、不能拖到自己的后代防止成环。三种方式修改后都会调用updateTree()updateTree以 50ms 更新连线、1000ms 过渡移动节点并复用旧树坐标做平滑动画。生成管线v1.86.0 如何自动生成多起源宗教此前默认只为宗教生成层级数据更新说明明确指出By default FMG generates hierarchical data for religions only. 即系统默认只为宗教生成origins层级文化Cultures的层级数据始终由用户掌控因为构建像样的谱系往往需要为已灭绝元素补建影子节点shadow nodes而文化模块目前还没有这一机制——但手动补充并不复杂这正是本次更新预期能帮上忙的原因。现在宗教生成器可产出多源宗教在 religions-generator.ts 的defineOriginsL857-L901中组织化宗教Organized与教团Cult通过BFS 半径聚类寻找邻近的既有宗教作为多个起源参数如下宗教类型clusterSizemaxReligions说明Organized1002组织化宗教最多取 2 个邻近起源Cult503教团最多取 3 个邻近起源各类型生成逻辑根元素i 0origins null表示无宗教Folk民俗信仰origins [0]仅从其所属文化出发基于文化的 Folk 分支当expansion culture且满足概率条件时origins [folkReligion.i]Organized / Cult调用 getReligionsInRadius 在中心点周围 BFS 搜索簇大小由上表决定收集id 更小且不会造成环的邻近宗教数量达到maxReligions即停止找不到任何候选时回退到同文化民俗信仰或根元素。getReligionsInRadius内部通过 wouldCreateOriginCycle 做环检测沿候选父级的origins链向上追溯若途中出现自身 id 则判定会成环并跳过该候选。异端Heresy则固定以origins: [parent.i]单一父级方式生成createHeresy。环检测对多父系的意义因为多起源让谱系从树变成有向图成环风险陡增。wouldCreateOriginCycle把环检测下沉到生成器内部确保自动生成的origins永远不会构成循环引用否则stratify会直接抛错、导致整棵树无法构建。编辑器集成文化与宗教如何使用 HierarchyTree层级视图是一个可复用组件通过懒加载注册在 controllers/index.tsHierarchyTree: () import(/controllers/hierarchy-tree).then(m m.HierarchyTree),两个编辑器分别调用HierarchyTree.open宗教编辑器religions-editor.tstype: religionsdata: pack.religions并按类型映射形状——Folk 圆形、Organized 方形、Cult 六边形、Heresy 菱形悬停节点时通过onNodeEnter/onNodeLeave在地图上高亮对应宗教的势力范围文化编辑器cultures-editor.tstype: culturesdata: pack.cultures形状映射包括 Generic 圆形、River 菱形、Lake 六边形、Naval 方形、Highland 凹形、Nomadic 八边形、Hunting 五边形悬停时高亮文化区域。打开命令还挂载在全局快捷键与命令面板Omnibar中例如 map-commands.ts 注册了aliases: people origins tree与aliases: faith beliefs origins tree可直接输入关键词唤出。文化 CSV 导入导出中的 Origins文化的origins与 CSV 导入导出深度绑定cultures-editor.ts导出时 CSV 的Origins列会以名称, 名称形式列出全部来源过滤掉null导入时restoreOriginsL1094-L1108把名称字符串拆分为 id 列表作为多 Origin 写入current.origins并保证非空回退为[0]。这意味着你完全可以在 FMG 之外用电子表格规划多父系谱系再导入地图。实战指南给文化手工添加影子节点构建谱系v1.86.0 更新明确建议文化的良好层级可能需要为已灭绝元素添加多个影子节点shadow nodes。所谓影子节点是指在谱系中占据中间层、用于串联先后传承关系的占位元素。操作路径打开文化编辑器新增一个占位文化如Proto-Xtype可选Generic名称与代码自拟通过 CSV 导入Origins列或树视图的Edit → Select origins对话框把真实文化的 Primary Origin 指向影子节点把影子节点的 Origin 指向更早的祖先形成真实文化 → 影子节点 → 更早祖先的链式多级结构若一个文化受多个源头影响例如融合了两个古老族群为它在Origins中勾选多个 Secondary 复选框或者直接拖拽该节点到第二个父节点上需要清除某条链接时点击详情面板里对应 Origin 按钮上的 ✕.hierarchyTree_selectedOrigin::after的content: ✕即可。注意影子节点会作为正式元素写入pack.cultures请结合自定义文化类型Generic/River/Lake/Naval/Highland/Nomadic/Hunting合理命名避免与真实文化混淆。总结v1.86.0 的多父系层级是一个小改动、大能力的更新origins数组的第一项继续驱动 D3 树布局后续项则以虚线次级链接的形式独立渲染使 FMG 的谱系表达能力从严格的树升级为允许多源继承的有向图宗教生成器defineOriginsgetReligionsInRadiuswouldCreateOriginCycle在默认生成阶段就产出带防环校验的多起源宗教文化则完全交给用户通过详情面板、Select origins 对话框、拖拽以及 CSV 导入导出四种途径自由编排。由于次级链接独立于树结构渲染务必注意链接数量越大视图越可能显得杂乱建议用影子节点把复杂谱系拆成多层让树骨架 虚线旁支的组合始终清晰可读。赞分享前端图形学3D渲染【免费下载链接】Fantasy-Map-GeneratorWeb application generating interactive and highly customizable maps项目地址https://gitcode.com/gh_mirrors/fa/Fantasy-Map-Generator点击查看免费下载相关推荐Fantasy-Map-Generator文化信仰系统构建完整世界观的终极指南Fantasy Map Generator是一个功能强大的Web应用程序专门用于生成交互式和高度可定制的幻想地图。它的文化信仰系统能够帮助用户构建完整的世界观前端图形学3D渲染ODrive快速上手10分钟从零开始配置你的第一个电机驱动器ODrive快速上手10分钟从零开始配置你的第一个电机驱动器 ODrive是一款开源的高性能无刷电机驱动器旨在让廉价的直流无刷电机能够在高性能机器人项目中发嵌入式固件硬件开发智能硬件机器人终极指南Fantasy-Map-Generator如何生成逼真水系网络终极指南Fantasy Map Generator如何生成逼真水系网络 Fantasy Map Generator是一款强大的Web应用能够生成高度可定制的前端图形学3D渲染上一篇ebook2audiobookE2A电子书转有声书实战指南Gradio GUI 操作、Headless CLI 全参数与 Docker 多后端部署下一篇radare2 的 WebAssemblyWASI支持从 WASI 构建到浏览器端集成实战指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考