如何让Balkan OrgChart.js中所有子节点直接连接到父节点？

可以实现，核心是通过配置关闭默认的子节点聚合逻辑，或者自定义连接线的渲染方式，以下是具体方案：

方案1：通过内置配置关闭聚合连接 #

Balkan OrgChart默认会将同一父节点的子节点连线聚合到一个中间点，只需在layout配置中关闭aggregation即可让子节点直接连接父节点：

const chart = new OrgChart(document.getElementById('tree'), {
  data: [
    { id: 1, name: '父节点' },
    { id: 2, pid: 1, name: '子节点1' },
    { id: 3, pid: 1, name: '子节点2' },
    { id: 4, pid: 1, name: '子节点3' }
  ],
  layout: {
    type: 'vertical',
    aggregation: false // 关闭子节点连线聚合
  },
  connector: {
    type: 'straight', // 使用直线连接（也可选curve曲线）
    style: {
      stroke: '#666',
      strokeWidth: 2
    }
  },
  layout: {
    nodeSpacing: 50, // 调整子节点间水平间距
    levelSpacing: 70 // 调整父子节点间垂直间距
  }
});

方案2：自定义连接线渲染函数 #

如果内置配置无法满足需求，可以通过自定义connector.render函数，直接绘制父节点到子节点的连线，完全绕过中间元素：

const chart = new OrgChart(document.getElementById('tree'), {
  data: [
    { id: 1, name: '父节点' },
    { id: 2, pid: 1, name: '子节点1' },
    { id: 3, pid: 1, name: '子节点2' },
    { id: 4, pid: 1, name: '子节点3' }
  ],
  connector: {
    render: function(fromNode, toNode) {
      // 获取节点的位置信息
      const fromRect = fromNode.getBoundingClientRect();
      const toRect = toNode.getBoundingClientRect();
      
      // 计算父节点底部中点和子节点顶部中点坐标
      const startX = fromRect.left + fromRect.width / 2;
      const startY = fromRect.bottom;
      const endX = toRect.left + toRect.width / 2;
      const endY = toRect.top;
      
      // 返回SVG直线元素
      return `<line x1="${startX}" y1="${startY}" x2="${endX}" y2="${endY}" stroke="#666" stroke-width="2" />`;
    }
  },
  layout: {
    nodeSpacing: 50,
    levelSpacing: 70
  }
});

注意事项 #

• 调整nodeSpacing和levelSpacing可以避免节点重叠，优化视觉效果
• 若使用自定义渲染函数，需确保节点位置计算准确，适配不同屏幕尺寸

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