要在AmCharts的Force Directed Tree上仅展开一级子节点,可以使用以下代码示例:
// 创建数据
var chartData = {
"name": "Root Node",
"children": [
{
"name": "Child Node 1",
"children": [
{"name": "Grandchild Node 1"},
{"name": "Grandchild Node 2"}
]
},
{
"name": "Child Node 2",
"children": [
{"name": "Grandchild Node 3"},
{"name": "Grandchild Node 4"}
]
}
]
};
// 初始化图表
var chart = AmCharts.makeChart("chartdiv", {
"type": "forceDirected",
"dataProvider": chartData,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"export": {
"enabled": true
}
});
// 仅展开一级子节点
chart.addListener("clickGraphItem", function(event) {
if (event.graph.category === "child" && !event.item.dataContext.opened) {
event.item.dataContext.opened = true;
var children = event.item.dataContext.children;
if (children) {
for (var i = 0; i < children.length; i++) {
chart.dataProvider.push(children[i]);
}
chart.validateData();
}
}
});
在这个示例中,我们首先创建了一个包含根节点和子节点的数据对象。然后,我们使用AmCharts的makeChart方法初始化了一个Force Directed Tree图表,并将数据提供给它。我们还定义了一个事件监听器,当图表上的节点被点击时,将仅展开一级子节点。
在事件监听器中,我们首先检查被点击节点的category是否为"child",并且该节点的opened属性为false。如果满足条件,我们将opened属性设置为true,然后将该节点的子节点添加到图表的数据提供者中,并调用validateData方法来更新图表。
这样,每次点击一个子节点,它的一级子节点将会展开,并添加到图表中,而其他子节点将保持收起状态。