AmCharts -如何在强制定向树上仅展开第一级子对象

基础概念

AmCharts 是一个功能强大的 JavaScript 图表库，用于创建各种类型的图表，包括柱状图、折线图、饼图等。强制定向树（Force-Directed Tree）是一种图表类型，用于展示层次结构数据，其中节点之间的连接基于力导向算法，使得图表布局更加自然。

类型

AmCharts 中的强制定向树主要有以下几种类型：

Force-Directed Tree：标准的力导向树图表。
Hierarchical Tree：层次结构树图表，节点之间的连接更加固定。
Radial Tree：径向树图表，节点围绕中心点呈放射状排列。

应用场景

组织结构图：展示公司或组织的层级结构。
文件系统：展示文件和文件夹的层次结构。
社交网络：展示用户之间的关系网络。

问题解决

要在 AmCharts 的强制定向树上仅展开第一级子对象，可以通过以下步骤实现：

初始化图表：创建一个力导向树图表实例。
设置数据：加载数据并设置节点和连接。
展开第一级子对象：通过代码控制仅展开第一级子对象。

以下是一个示例代码：

// 引入 AmCharts 库
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

// 创建图表实例
var chart = am5xy.XYChart.new(am5.Root.new("chartdiv"), {
    panX: false,
    panY: false,
    wheelX: "panX",
    wheelY: "zoomX",
    layout: root => {
        var layout = am5 ForceDirectedTree.new(root, 1, 1);
        layout.iterations = 2;
        return layout;
    }
});

// 加载数据
chart.data.setAll([
    {
        "name": "Root",
        "children": [
            {
                "name": "Level 1 - A",
                "children": [
                    { "name": "Level 2 - A1" },
                    { "name": "Level 2 - A2" }
                ]
            },
            {
                "name": "Level 1 - B",
                "children": [
                    { "name": "Level 2 - B1" },
                    { "name": "Level 2 - B2" }
                ]
            }
        ]
    }
]);

// 创建节点和连接
var node = chart.series.push(new am5xy ForceDirectedSeries.new(root, {
    name: "Series",
    layout: root => {
        return am5 ForceDirectedTree.new(root, 1, 1);
    },
    nodeTemplate: (node, series) => {
        var circle = node.shape = am5.Circle.new(root, 20);
        circle.fill = am5.Color.new(root, 0xff0000);
        circle.stroke = am5.Color.new(root, 0xffffff);
        return circle;
    },
    linkTemplate: (link, series) => {
        var line = link.shape = am5.Line.new(root, 2);
        line.stroke = am5.Color.new(root, 0x0000ff);
        return line;
    }
}));

// 展开第一级子对象
node.nodes.each(node => {
    if (node.dataItem.dataContext.children) {
        node.isExpanded = true;
    }
});