D3 Org Chart默认展开全部分支及按部门/办公室分组方法

需求1：图表加载时默认展开所有分支 #

d3-org-chart v2 版本提供了原生配置项和实例方法实现全展开，不需要修改插件源码：

• 初始化配置阶段，给实例设置initialExpandLevel参数，赋值为一个远大于组织架构实际最大层级的正整数即可（比如999，常规组织层级不可能达到这个数值，等价于全展开）
• 如果需要在图表渲染完成后手动触发全展开，直接调用实例的expandAll()方法即可

参考初始化代码：

// 原有d3-org-chart初始化逻辑
const chart = new d3.OrgChart()
  .container('#your-chart-wrapper') // 替换为实际的图表容器选择器
  .data(yourOrgDataSource) // 替换为实际的组织架构数据源
  // 配置初始展开层级为999，实现加载即全展开
  .initialExpandLevel(999)
  // 其余原有配置项保持不变
  .render()

// 若需要渲染后手动触发全展开，取消注释下一行即可
// chart.expandAll()

需求2：按办公室/部门维度归并人员为分组节点 #

这个效果不需要修改插件底层逻辑，通过数据预处理+自定义节点配置两步即可实现：

1. 预处理原始人员数据，生成分组虚拟节点
   遍历原始人员数据集，给每个唯一的部门/办公室值生成一个标记为「分组节点」的虚拟数据项，把同部门下所有普通人员的parentId调整为对应分组节点的ID，再把分组节点按实际组织架构逻辑挂到对应的上级节点下即可。
   参考数据处理代码：

   /**
    * 按指定字段生成分组节点
    * @param {Array} rawData 原始人员数据
    * @param {string} groupField 用来分组的字段名，比如department/office
    * @param {string|number} groupParentId 分组节点默认挂载的上级节点ID
    */
   function buildGroupedData(rawData, groupField, groupParentId) {
     const groupRecord = new Map()
     const result = []
     // 先生成所有分组虚拟节点
     rawData.forEach(staff => {
       const groupKey = staff[groupField]
       if (!groupRecord.has(groupKey)) {
         const groupId = `__group_${groupField}_${groupKey}`
         const groupMemberCount = rawData.filter(item => item[groupField] === groupKey).length
         groupRecord.set(groupKey, groupId)
         result.push({
           id: groupId,
           name: `${groupKey}（${groupMemberCount}人）`,
           parentId: groupParentId,
           isGroupNode: true, // 标记为分组节点，后续做样式区分用
           groupName: groupKey
         })
       }
     })
     // 调整普通人员的父级为对应分组节点
     rawData.forEach(staff => {
       staff.parentId = groupRecord.get(staff[groupField])
       staff.isGroupNode = false
       result.push(staff)
     })
     return result
   }
   
   // 调用示例：按department字段生成分组数据，分组节点挂在ID为1的顶层节点下
   const groupedChartData = buildGroupedData(yourRawStaffData, 'department', 1)
   

2. 自定义分组节点样式，和普通人员节点做区分
   调用chart实例的nodeContent方法，判断当前节点是否为分组节点，返回不同的节点渲染模板即可。可以给分组节点设置差异化的背景色、边框、提示文案，和普通人员节点做出明确视觉区分。
   参考配置代码：

   chart.nodeContent((nodeData) => {
     // 分组节点渲染逻辑
     if (nodeData.data.isGroupNode) {
       return `
         <div style="padding:16px;border-radius:8px;background:#e6f4ff;border:2px solid #1677ff;min-width:160px;text-align:center;">
           <div style="font-weight:600;font-size:15px;">${nodeData.data.name}</div>
           <div style="font-size:12px;color:#666;margin-top:6px;">点击展开查看成员</div>
         </div>
       `
     }
     // 普通人员节点沿用原有渲染逻辑即可
     return `
       <div style="padding:12px;border-radius:6px;background:#fff;border:1px solid #e5e7eb;min-width:140px;">
         <div>${nodeData.data.name}</div>
       </div>
     `
   })
   

3. 可选扩展：如果需要做「全人员视图/分组视图」一键切换，只要提前准备好全量展开的原始数据集、分组处理后的数据集，切换时调用chart.data(目标数据集).render()即可重新渲染，不需要销毁实例重建。

内容的提问来源于stack exchange，提问作者KenNotAnthony