Oracle APEX组织图创建：Apex D3插件问题及方案咨询

1. 扩展节点信息（职位、部门、员工图片） #

该D3组织图插件通常支持自定义节点HTML模板，你可以通过以下步骤添加额外信息：

• 步骤1：调整SQL数据源
  在插件绑定的SQL查询中，新增职位（JOB_TITLE）、部门（DEPARTMENT）、员工图片路径（EMP_IMAGE）字段，确保这些字段被返回供模板使用。
• 步骤2：自定义节点模板
  在插件属性中找到「Node HTML Template」（或类似名称）的配置项，替换为包含多字段的自定义模板：

  <div class="org-node">
    <img src="#EMP_IMAGE#" alt="#EMP_NAME#" class="emp-avatar">
    <div class="emp-name">#EMP_NAME#</div>
    <div class="emp-title">#JOB_TITLE#</div>
    <div class="emp-dept">#DEPARTMENT#</div>
  </div>
  

• 步骤3：添加样式调整
  在页面的「内联CSS」中补充样式，优化节点布局：

  .org-node { text-align: center; padding: 8px; border: 1px solid #eee; border-radius: 4px; }
  .emp-avatar { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 4px; }
  .emp-title { font-size: 0.8em; color: #666; margin: 2px 0; }
  .emp-dept { font-size: 0.7em; color: #999; }
  

2. 为父节点添加超链接 #

默认仅叶子节点支持链接的问题，可通过以下两种方式解决：

• 方式1：模板全局添加链接
  修改节点模板，将整个节点包裹在<a>标签中，同时在SQL查询中为所有节点（包括父节点）返回链接字段（EMP_LINK）：

  <a href="#EMP_LINK#" class="node-link" target="_self">
    <div class="org-node">
      <!-- 节点内容 -->
    </div>
  </a>
  

• 方式2：自定义点击事件
  在插件的「JavaScript初始化代码」中添加节点点击逻辑，忽略父/叶子节点的限制：

  d3.selectAll('.org-node').on('click', function(event, nodeData) {
    if (nodeData.emp_link) {
      window.location.href = nodeData.emp_link;
    }
  });
  

  确保SQL查询返回的EMP_LINK字段对父节点也有效。

3. 可展开组织图实现 #

方案1：改造现有D3插件 #

如果插件本身未集成折叠/展开功能，可添加D3原生的层级切换逻辑：

// 在插件的渲染逻辑中添加节点点击事件
d3.selectAll('.org-node').on('click', function(event, d) {
  // 切换子节点显示状态
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  // 调用插件的更新函数重新渲染图表（需确认插件是否暴露此函数）
  if (typeof updateChart === 'function') {
    updateChart(d);
  }
});

方案2：自定义D3组织图代码 #

若插件改造难度大，可直接在APEX静态区域中嵌入原生D3代码实现可展开功能：

1. 在页面属性的「JavaScript」部分引入D3库（APEX部分版本已内置，无需额外引入）。
2. 创建静态区域，添加以下核心代码：

   // 通过APEX AJAX获取层级数据（替换为你的PL/SQL进程名）
   apex.server.process('GET_ORG_DATA', {}, {
     success: function(data) {
       // 转换数据为D3层级结构
       const root = d3.hierarchy(data, d => d.children);
       // 设置树形布局
       const treeLayout = d3.tree().size([800, 600]);
       treeLayout(root);
   
       const svg = d3.select('#org-chart-container').append('svg')
         .attr('width', 800)
         .attr('height', 600);
   
       // 绘制连线
       svg.append('g')
         .selectAll('path')
         .data(root.links())
         .enter()
         .append('path')
         .attr('d', d3.linkHorizontal()
           .x(d => d.y)
           .y(d => d.x));
   
       // 绘制节点并添加折叠/展开逻辑
       const nodes = svg.append('g')
         .selectAll('g')
         .data(root.descendants())
         .enter()
         .append('g')
         .attr('transform', d => `translate(${d.y},${d.x})`)
         .on('click', function(event, d) {
           d.children = d.children ? null : d._children;
           updateChart(root);
         });
   
       // 添加节点内容（包含链接、图片、职位等）
       nodes.append('a')
         .attr('href', d => d.data.link)
         .append('foreignObject')
         .attr('width', 100)
         .attr('height', 80)
         .append('xhtml:div')
         .html(d => `
           <img src="${d.data.image}" style="width:40px; border-radius:50%;">
           <div>${d.data.name}</div>
           <div style="font-size:0.8em;">${d.data.title}</div>
           <div style="font-size:0.7em;">${d.data.dept}</div>
         `);
   
       // 更新图表函数
       function updateChart(source) {
         const updatedNodes = root.descendants();
         const updatedLinks = root.links();
   
         treeLayout(root);
         // 此处补充节点和连线的更新逻辑（位置重绘等）
       }
     }
   });
   

3. 创建PL/SQL进程GET_ORG_DATA，返回JSON格式的层级员工数据（包含id、parent_id、name、title、dept、image、link等字段）。

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