如何通过JavaScript控制Balkan OrgChart JS完整树形结构的移动？

实现思路 #

Balkan OrgChart JS支持通过API直接触发视图平移，核心是利用官方提供的pan(dx, dy)方法（或兼容旧版本的内部视图偏移修改），结合按钮点击事件控制上下左右方向的位移。

完整代码示例 #

HTML结构

<!-- 控制按钮 -->
<div class="chart-controls">
  <button id="btnUp">↑ 上移</button>
  <button id="btnDown">↓ 下移</button>
  <button id="btnLeft">← 左移</button>
  <button id="btnRight">→ 右移</button>
</div>

<!-- 树形结构容器 -->
<div id="orgChart"></div>

JavaScript实现

// 初始化OrgChart实例
const chart = new OrgChart(document.getElementById("orgChart"), {
  nodes: [
    { id: 1, name: "CEO" },
    { id: 2, pid: 1, name: "研发经理" },
    { id: 3, pid: 1, name: "产品经理" },
    { id: 4, pid: 2, name: "前端开发" },
    { id: 5, pid: 2, name: "后端开发" }
  ]
});

// 定义每次移动的步长（像素）
const moveStep = 20;

// 绑定按钮点击事件
// 上移：y轴负方向偏移
document.getElementById("btnUp").addEventListener("click", () => {
  chart.pan(0, -moveStep);
});

// 下移：y轴正方向偏移
document.getElementById("btnDown").addEventListener("click", () => {
  chart.pan(0, moveStep);
});

// 左移：x轴负方向偏移
document.getElementById("btnLeft").addEventListener("click", () => {
  chart.pan(-moveStep, 0);
});

// 右移：x轴正方向偏移
document.getElementById("btnRight").addEventListener("click", () => {
  chart.pan(moveStep, 0);
});

旧版本兼容方案 #

如果你的OrgChart版本未提供pan方法，可以直接修改内部视图偏移量并刷新图表：

// 上移
document.getElementById("btnUp").addEventListener("click", () => {
  chart._v.y -= moveStep;
  chart.draw();
});

// 下移
document.getElementById("btnDown").addEventListener("click", () => {
  chart._v.y += moveStep;
  chart.draw();
});

// 左移
document.getElementById("btnLeft").addEventListener("click", () => {
  chart._v.x -= moveStep;
  chart.draw();
});

// 右移
document.getElementById("btnRight").addEventListener("click", () => {
  chart._v.x += moveStep;
  chart.draw();
});

可选优化：边界限制 #

如果需要防止视图移出画布范围，可以添加边界判断：

document.getElementById("btnLeft").addEventListener("click", () => {
  // 限制x轴最小偏移（避免左侧空白过多）
  if (chart._v.x - moveStep >= -chart._size.width + window.innerWidth) {
    chart.pan(-moveStep, 0);
  }
});

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