Captain Armorica
Reputation: 33
AmCharts - How to expand only first level children on a Force Directed Tree
I'm working on a force directed tree with 3 levels, and currently when I click to expand the second level childrens, the third level is expanded at the same time.
Is there a way to display only the 2nd level children when clicking the 1st level bubbles and display the 3rd level children only when clicking the second level bubbles ?
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>Upvotes: 3
Views: 1736
Answers (1)
notacouch
Reputation: 3655
Yes, there is a way to change the behavior from expanding all nodes to just the next, immediate level of the node that was clicked.
By default, the expandAll property of ForceDirectedNodes is set to true.
You can set this to false on all of them via
series.nodes.template.expandAll = false;
And that will give you the behavior you're looking for:
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 fork:
https://jsfiddle.net/notacouch/4wfc2duj/
Hope this helps.
Upvotes: 4
Related Questions
- How to expand first level children only of Treeview
- AMCharts - Dynamically add children to tree map
- How do I change the color of deeper level items in an amCharts TreeMap?
- amcharts4 Force Directed Tree not dynamically updating
- Is it possible to go to previous level on amcharts drill-down treemap?
- AmCharts 4 Force Directed Chart - Select Bubble by Parent -> Child Location
- jstree - expand branch to a specific grand-child
- extjs, expand all children as a treePanel
- d3.js tree diagram - expand only next level nodes when clicking on root node
- DynaTree: How do you expand all children ( downstream node levels) from a active node?