GetOrgChart -渲染、更新、删除等

Question

我有几个问题。

1)如何更新现有节点的主题/颜色/外观？我很乐意更新配置，然后重新绘制整个图表(但orgChart.draw()似乎不起作用)。

2)关于拖放，当启用时，在另一个节点上的拖放不会执行任何操作。例如，我可以引用一个函数，该函数将拖放的节点“移动”到它被拖放的节点吗？

3)启用拖放时，操作按钮(编辑节点、删除节点、添加子节点)处于禁用状态。

提前感谢！

Answer 1

您可以使用BALKANGraph插件来实现所需的功能

1)示例如下：

2)和3)在没有任何修改的情况下工作

​

​

​

            var chart = new OrgChart(document.getElementById("tree"), {
                template: "ana",
                nodeBinding: {
                    field_0: "name",
                    img_0: "img"
                },
                links: [
                    { from: "2", to: "1" },
                    { from: "3", to: "1" }
                ],
                nodes: [
                    { id: "1", name: "Plamen Peshev", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "2", name: "Ava Field", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "3", name: "Rhys Harper", img: "//balkangraph.com/js/img/empty-img-blue.svg" }
                ]
            }); 

            document.getElementById("changeTemplate").addEventListener("click", function () {
                chart.config.nodes["1"].tags = ["ula-template"];
                chart.config.tags["ula-template"] = { template: "ula" };
                chart.draw(false);
            });

        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Helvetica;
        }

        #tree {
            width: 100%;
            height: 100%;
        }

#changeTemplate{
  font-size: 24px;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<button id="changeTemplate">Change the template of node 1</button>
<div id="tree"></div>

​