AmCharts - 如何仅在力导向树上扩展第一级子级
AmCharts - How to expand only first level children on a Force Directed Tree
我正在做一个三层的力导向树，目前当我点击展开第二层子节点时，第三层也会同时展开。
有没有办法点击一级气泡只显示二级子级，点击二级气泡只显示三级子级？
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
series.data = [
{
name: 'One',
color: ("#6ab8da"),
children: [{
name: '1',
children: [{
name: 'Blackberry',
value: 1
},
{
name: 'Raspberry',
value: 1
},
{
name: 'Blueberry',
value: 1
},
{
name: 'Strawberry',
value: 1
}
]
},
{
name: '2',
children: [{
name: 'Raisin',
value: 1
},
{
name: 'Prune',
value: 1
}
]
},
{
name: '3',
children: [{
name: 'Coconut',
value: 1
},
{
name: 'Cherry',
value: 1
},
{
name: 'Pomegranate',
value: 1
},
{
name: 'Pineapple',
value: 1
},
{
name: 'Grape',
value: 1
},
{
name: 'Apple',
value: 1
},
{
name: 'Peach',
value: 1
},
{
name: 'Pear',
value: 1
}
]
},
{
name: '4',
children: [{
name: 'Grapefruit',
value: 1
},
{
name: 'Orange',
value: 1
},
{
name: 'Lemon',
value: 1
},
{
name: 'Lime',
value: 1
}
]
}
]
},
{
name: 'Two',
color: ("#6872d9"),
children: [{
name: 'Visites vistuelles'
},
{
name: 'Lorem ipsum'
}
]
},
{
name: 'Three',
color: ("#a267d9"),
children: [{
name: 'Papery/Musty',
children: [{
name: 'Stale',
value: 1
},
{
name: 'Cardboard',
value: 1
},
{
name: 'Papery',
value: 1
},
{
name: 'Woody',
value: 1
},
{
name: 'Moldy/Damp',
value: 1
},
{
name: 'Musty/Dusty',
value: 1
},
{
name: 'Musty/Earthy',
value: 1
},
{
name: 'Animalic',
value: 1
},
{
name: 'Meaty Brothy',
value: 1
},
{
name: 'Phenolic',
value: 1
}
]
},
{
name: 'Chemical',
children: [{
name: 'Bitter',
value: 1
},
{
name: 'Salty',
value: 1
},
{
name: 'Medicinal',
value: 1
},
{
name: 'Petroleum',
value: 1
},
{
name: 'Skunky',
value: 1
},
{
name: 'Rubber',
value: 1
}
]
}
]
},
{
name: 'Four',
color: ("#da66cc"),
children: [{
name: 'Pipe Tobacco',
value: 1
},
{
name: 'Tobacco',
value: 1
},
{
name: 'Burnt',
children: [{
name: 'Acrid',
value: 1
},
{
name: 'Ashy',
value: 1
},
{
name: 'Smoky',
value: 1
},
{
name: 'Brown, Roast',
value: 1
}
]
},
{
name: 'Cereal',
children: [{
name: 'Grain',
value: 1
},
{
name: 'Malt',
value: 1
}
]
}
]
}
];
series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";
series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;
series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/
series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;
series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 600px;
}
<body>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
</body>
是的，有一种方法可以将行为从展开所有节点更改为仅展开被单击节点的下一个直接级别。
默认情况下，expandAll property of ForceDirectedNodes 设置为 true。
您可以通过
将所有这些设置为 false
series.nodes.template.expandAll = false;
这将为您提供所需的行为：
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
series.nodes.template.expandAll = false;
series.data = [
{
name: 'One',
color: ("#6ab8da"),
children: [{
name: '1',
children: [{
name: 'Blackberry',
value: 1
},
{
name: 'Raspberry',
value: 1
},
{
name: 'Blueberry',
value: 1
},
{
name: 'Strawberry',
value: 1
}
]
},
{
name: '2',
children: [{
name: 'Raisin',
value: 1
},
{
name: 'Prune',
value: 1
}
]
},
{
name: '3',
children: [{
name: 'Coconut',
value: 1
},
{
name: 'Cherry',
value: 1
},
{
name: 'Pomegranate',
value: 1
},
{
name: 'Pineapple',
value: 1
},
{
name: 'Grape',
value: 1
},
{
name: 'Apple',
value: 1
},
{
name: 'Peach',
value: 1
},
{
name: 'Pear',
value: 1
}
]
},
{
name: '4',
children: [{
name: 'Grapefruit',
value: 1
},
{
name: 'Orange',
value: 1
},
{
name: 'Lemon',
value: 1
},
{
name: 'Lime',
value: 1
}
]
}
]
},
{
name: 'Two',
color: ("#6872d9"),
children: [{
name: 'Visites vistuelles'
},
{
name: 'Lorem ipsum'
}
]
},
{
name: 'Three',
color: ("#a267d9"),
children: [{
name: 'Papery/Musty',
children: [{
name: 'Stale',
value: 1
},
{
name: 'Cardboard',
value: 1
},
{
name: 'Papery',
value: 1
},
{
name: 'Woody',
value: 1
},
{
name: 'Moldy/Damp',
value: 1
},
{
name: 'Musty/Dusty',
value: 1
},
{
name: 'Musty/Earthy',
value: 1
},
{
name: 'Animalic',
value: 1
},
{
name: 'Meaty Brothy',
value: 1
},
{
name: 'Phenolic',
value: 1
}
]
},
{
name: 'Chemical',
children: [{
name: 'Bitter',
value: 1
},
{
name: 'Salty',
value: 1
},
{
name: 'Medicinal',
value: 1
},
{
name: 'Petroleum',
value: 1
},
{
name: 'Skunky',
value: 1
},
{
name: 'Rubber',
value: 1
}
]
}
]
},
{
name: 'Four',
color: ("#da66cc"),
children: [{
name: 'Pipe Tobacco',
value: 1
},
{
name: 'Tobacco',
value: 1
},
{
name: 'Burnt',
children: [{
name: 'Acrid',
value: 1
},
{
name: 'Ashy',
value: 1
},
{
name: 'Smoky',
value: 1
},
{
name: 'Brown, Roast',
value: 1
}
]
},
{
name: 'Cereal',
children: [{
name: 'Grain',
value: 1
},
{
name: 'Malt',
value: 1
}
]
}
]
}
];
series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";
series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;
series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/
series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;
series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 600px;
}
<body>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
</body>
jsfiddle 分支：
https://jsfiddle.net/notacouch/4wfc2duj/
希望对您有所帮助。
我正在做一个三层的力导向树，目前当我点击展开第二层子节点时，第三层也会同时展开。
有没有办法点击一级气泡只显示二级子级，点击二级气泡只显示三级子级？
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
series.data = [
{
name: 'One',
color: ("#6ab8da"),
children: [{
name: '1',
children: [{
name: 'Blackberry',
value: 1
},
{
name: 'Raspberry',
value: 1
},
{
name: 'Blueberry',
value: 1
},
{
name: 'Strawberry',
value: 1
}
]
},
{
name: '2',
children: [{
name: 'Raisin',
value: 1
},
{
name: 'Prune',
value: 1
}
]
},
{
name: '3',
children: [{
name: 'Coconut',
value: 1
},
{
name: 'Cherry',
value: 1
},
{
name: 'Pomegranate',
value: 1
},
{
name: 'Pineapple',
value: 1
},
{
name: 'Grape',
value: 1
},
{
name: 'Apple',
value: 1
},
{
name: 'Peach',
value: 1
},
{
name: 'Pear',
value: 1
}
]
},
{
name: '4',
children: [{
name: 'Grapefruit',
value: 1
},
{
name: 'Orange',
value: 1
},
{
name: 'Lemon',
value: 1
},
{
name: 'Lime',
value: 1
}
]
}
]
},
{
name: 'Two',
color: ("#6872d9"),
children: [{
name: 'Visites vistuelles'
},
{
name: 'Lorem ipsum'
}
]
},
{
name: 'Three',
color: ("#a267d9"),
children: [{
name: 'Papery/Musty',
children: [{
name: 'Stale',
value: 1
},
{
name: 'Cardboard',
value: 1
},
{
name: 'Papery',
value: 1
},
{
name: 'Woody',
value: 1
},
{
name: 'Moldy/Damp',
value: 1
},
{
name: 'Musty/Dusty',
value: 1
},
{
name: 'Musty/Earthy',
value: 1
},
{
name: 'Animalic',
value: 1
},
{
name: 'Meaty Brothy',
value: 1
},
{
name: 'Phenolic',
value: 1
}
]
},
{
name: 'Chemical',
children: [{
name: 'Bitter',
value: 1
},
{
name: 'Salty',
value: 1
},
{
name: 'Medicinal',
value: 1
},
{
name: 'Petroleum',
value: 1
},
{
name: 'Skunky',
value: 1
},
{
name: 'Rubber',
value: 1
}
]
}
]
},
{
name: 'Four',
color: ("#da66cc"),
children: [{
name: 'Pipe Tobacco',
value: 1
},
{
name: 'Tobacco',
value: 1
},
{
name: 'Burnt',
children: [{
name: 'Acrid',
value: 1
},
{
name: 'Ashy',
value: 1
},
{
name: 'Smoky',
value: 1
},
{
name: 'Brown, Roast',
value: 1
}
]
},
{
name: 'Cereal',
children: [{
name: 'Grain',
value: 1
},
{
name: 'Malt',
value: 1
}
]
}
]
}
];
series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";
series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;
series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/
series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;
series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 600px;
}
<body>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
</body>
是的，有一种方法可以将行为从展开所有节点更改为仅展开被单击节点的下一个直接级别。
默认情况下，expandAll property of ForceDirectedNodes 设置为 true。
您可以通过
将所有这些设置为 falseseries.nodes.template.expandAll = false;
这将为您提供所需的行为：
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();
var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
series.nodes.template.expandAll = false;
series.data = [
{
name: 'One',
color: ("#6ab8da"),
children: [{
name: '1',
children: [{
name: 'Blackberry',
value: 1
},
{
name: 'Raspberry',
value: 1
},
{
name: 'Blueberry',
value: 1
},
{
name: 'Strawberry',
value: 1
}
]
},
{
name: '2',
children: [{
name: 'Raisin',
value: 1
},
{
name: 'Prune',
value: 1
}
]
},
{
name: '3',
children: [{
name: 'Coconut',
value: 1
},
{
name: 'Cherry',
value: 1
},
{
name: 'Pomegranate',
value: 1
},
{
name: 'Pineapple',
value: 1
},
{
name: 'Grape',
value: 1
},
{
name: 'Apple',
value: 1
},
{
name: 'Peach',
value: 1
},
{
name: 'Pear',
value: 1
}
]
},
{
name: '4',
children: [{
name: 'Grapefruit',
value: 1
},
{
name: 'Orange',
value: 1
},
{
name: 'Lemon',
value: 1
},
{
name: 'Lime',
value: 1
}
]
}
]
},
{
name: 'Two',
color: ("#6872d9"),
children: [{
name: 'Visites vistuelles'
},
{
name: 'Lorem ipsum'
}
]
},
{
name: 'Three',
color: ("#a267d9"),
children: [{
name: 'Papery/Musty',
children: [{
name: 'Stale',
value: 1
},
{
name: 'Cardboard',
value: 1
},
{
name: 'Papery',
value: 1
},
{
name: 'Woody',
value: 1
},
{
name: 'Moldy/Damp',
value: 1
},
{
name: 'Musty/Dusty',
value: 1
},
{
name: 'Musty/Earthy',
value: 1
},
{
name: 'Animalic',
value: 1
},
{
name: 'Meaty Brothy',
value: 1
},
{
name: 'Phenolic',
value: 1
}
]
},
{
name: 'Chemical',
children: [{
name: 'Bitter',
value: 1
},
{
name: 'Salty',
value: 1
},
{
name: 'Medicinal',
value: 1
},
{
name: 'Petroleum',
value: 1
},
{
name: 'Skunky',
value: 1
},
{
name: 'Rubber',
value: 1
}
]
}
]
},
{
name: 'Four',
color: ("#da66cc"),
children: [{
name: 'Pipe Tobacco',
value: 1
},
{
name: 'Tobacco',
value: 1
},
{
name: 'Burnt',
children: [{
name: 'Acrid',
value: 1
},
{
name: 'Ashy',
value: 1
},
{
name: 'Smoky',
value: 1
},
{
name: 'Brown, Roast',
value: 1
}
]
},
{
name: 'Cereal',
children: [{
name: 'Grain',
value: 1
},
{
name: 'Malt',
value: 1
}
]
}
]
}
];
series.dataFields.linkWith = "linkWith";
series.dataFields.name = "name";
series.dataFields.id = "name";
series.dataFields.value = "value";
series.dataFields.children = "children";
series.dataFields.color = "color";
series.dataFields.collapsed = "on";
series.manyBodyStrength = -30;
series.links.template.distance = 1;
series.links.template.strength = 1;
series.centerStrength = 1.2;
/*series.manyBodyStrength = -50;*/
series.links.template.strength = 1;
series.nodes.template.tooltipText = "{name}";
series.nodes.template.fillOpacity = 1;
series.nodes.template.togglable = true;
series.nodes.template.label.text = "{name}";
series.fontSize = 14;
series.minRadius = 50;
series.maxRadius = 80;
series.maxLevels = 1;
series.nodes.template.label.hideOversized = true;
series.nodes.template.label.truncate = true;
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 600px;
}
<body>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
</body>
jsfiddle 分支：
https://jsfiddle.net/notacouch/4wfc2duj/
希望对您有所帮助。