dTree 入门指南3 步画出支持多个父节点的数据树家谱 / 组织关系【免费下载链接】dTreeA library for visualizing data trees with multiple parents, such as family trees. Built on top of D3.项目地址: https://gitcode.com/gh_mirrors/dt/dTreedTreenpm 包名d3-dtree是一个基于 D3.js 构建的开源 JavaScript 库专门用于可视化一个节点可以有多个父节点的数据树结构最典型的应用就是家谱每个人既有父亲又有母亲传统单父节点的树图在这里就不够用了。传统树图卡住的地方它专门来解决绝大多数树状图方案都隐含一个假设每个节点只有一个父节点。可现实数据并不总是这样——家谱里一个孩子同时连着父亲和母亲两条血缘线复杂组织里一个人可能同时挂在多个部门、多位负责人名下家族关系中还存在多段婚姻、收养等关系单纯父子嵌套描述不了。dTree 的建模方式是把婚姻关系当作一种独立的连接节点数据中每个节点下挂一个marriages列表每段婚姻记录一位配偶spouse和他们共同的孩子children。某个节点只要出现在多段婚姻的 children 里它在图上就自然拥有多个父节点血缘线自动连到各自的位置。这个设计是它能画出家谱的关键。适合谁谁不用考虑它适合需要在家谱、族谱、组织架构图、复杂层级关系页面中展示多父节点关系且会写一点前端 JavaScript 的开发者。不适合完全没有 JS 基础、只想要拖拽生成图表工具的纯新手只是画普通单父节点树的用户——D3 自带的层级布局d3.hierarchy已经够用引入 dTree 反而多此一举。另外注意两个运行前提页面里必须先加载D3 v4.x和lodash v4.xdTree 本身依赖它们工作。3 步完成安装与第一张图第 1 步拿到库。任选一种方式npm install d3-dtree # 或 yarn add d3-dtree也支持 Bowerbower install d3-dtree或者通过 jsDelivr 等 CDN 直接引入发布后的压缩文件dTree.min.js不写任何构建配置也能用。第 2 步加载依赖。在页面上引入 D3 v4.x 与 lodash v4.x这是唯一的外部依赖。第 3 步初始化渲染。准备好数据后一行调用const tree dTree.init(data, { target: #graph, // 渲染到的 DOM 容器 width: 1200, height: 800 });data是家谱数据下一节讲它的结构options是可选配置。返回的tree对象还内置了视口控制方法详见后面缩放一节。数据长什么样先看懂示例家谱仓库里自带一份可直接运行的示例数据 test/demo/data.json描述的是一姓 Niclas 家族的三代关系。每个节点的核心字段如下{ name: Niclas Superlongsurname, class: man, marriages: [{ spouse: { name: Iliana, class: woman }, children: [ { name: James }, { name: Jane } ] }], extra: {} }name节点上显示的名字class/textClass节点框和文字各自使用的 CSS 类名样式定制全靠它例如 demo 里男性是浅蓝底、女性是粉色底marriages该节点参与的所有婚姻每段婚姻包含一位spouse和一个children列表孩子可以嵌套自己的marriages逐代往下递归extra任意自定义数据会原样传给交互回调比如给 Iliana 存一个nickname: Illi点击时能直接取到。一个节点只要出现在两段不同婚姻的 children 里它就自动成为双父节点——数据本身不用额外标记多父关系是结构带来的。常用配置项尺寸、类名映射与调试开关options的默认值大致是画布 600×600、target: #graph、hideMarriageNodes: true默认不显示婚姻连接点、marriageNodeSize: 10、nodeWidth: 100四边margin为 0外加debug: false调试开关。其中最值得了解的是styles它定义了四类元素各自使用的 CSS 类名styles: { node: node, // 节点框 linage: linage, // 血缘连线 marriage: marriage, // 婚姻连线 text: nodeText // 节点文字 }换主题时既可以改这些类名也可以直接重定义对应 CSS两种方式都能生效。内置缩放与交互回调大图不乱、点击有反应返回的tree对象内置四个视口控制方法应对大型树结构的浏览tree.resetZoom()— 复位到初始视角tree.zoomToFit()— 自动缩放到整棵树都可见tree.zoomToNode(nodeId)— 聚焦到指定节点tree.zoomTo(x, y, zoom)— 移动到指定坐标和倍率。交互方面dTree 通过callbacks开放了整套钩子按需覆盖即可常用的有回调触发时机 / 用途nodeClick/nodeRightClick点击 / 右键某个节点拿到name、extra、idmarriageClick/marriageRightClick同上作用在婚姻连接点上textRenderer自定义节点显示的文字返回 HTML 字符串nodeRenderer自定义整个节点的渲染返回 HTML 字符串nodeSorter自定义节点在图中的排序示例想在人名后显示昵称只覆盖textRenderer就够了不必动其他渲染逻辑——这也是 demo 页面里对 Iliana 加括号备注的做法见 test/demo/index.html。如何自定义样式样式完全走 CSS 类README 给了一组开箱即用的默认样式核心五个类.linage { fill: none; stroke: black; } /* 血缘线 */ .marriage { fill: none; stroke: black; } /* 婚姻线 */ .node { background-color: lightblue; border: 1px solid; } .nodeText { font: 10px sans-serif; } .marriageNode { background-color: black; border-radius: 50%; }demo 的index.html在此之上又定义了man浅蓝底和woman粉底两个类配合数据里的class字段区分性别。想换风格时改节点外观动class对应的类改连线外观动linage/marriage改文字动textClass对应的类三者互不干扰。本地运行官方 Demo想直接看到效果克隆仓库后三步跑起来开发环境基于 Node 11 与 gulp 3git clone https://gitcode.com/gh_mirrors/dt/dTree cd dTree yarn install yarn run build yarn run demoyarn run demo会在localhost:3000上把 test/demo 目录跑起来页面自动加载刚编译的库和data.json家谱点击、右键节点都会弹出提示方便逐条体验回调行为。源码结构与项目状态核心逻辑集中在 src/dtree.js初始化、布局、交互回调与 src/builder.jsDOM 构建想改默认渲染或布局策略从这两个文件入手即可。项目采用 MIT 许可证当前 npm 版本为 2.4.1欢迎按 CONTRIBUTING.md 的规范提交改进。一句话收尾如果你的数据是单父节点的普通树用 D3 自带的层级布局一旦出现一个人对应多个父节点的家谱或复杂组织关系dTree 是目前少数开箱即用、且样式和交互都能自定义的 D3 方案。【免费下载链接】dTreeA library for visualizing data trees with multiple parents, such as family trees. Built on top of D3.项目地址: https://gitcode.com/gh_mirrors/dt/dTree创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考