Force-directed adding links
Not only can you use amCharts 4 to create amazing force-directed network visuals but you can also use the library as a UI to let users set those links in an engaging visual manner.
Check out the Anatomy of Force-Directed tree for an extensive guide into all you need to know about this chart type.
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 550px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
var data = []
for(var i = 0; i < 15; i++){
data.push({name: "Node " + i, value:Math.random() * 50 + 10});
}
chart.data = data;
networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.children = "children";
networkSeries.nodes.template.tooltipText = "{name}:{value}";
networkSeries.nodes.template.fillOpacity = 1;
networkSeries.dataFields.id = "name";
networkSeries.dataFields.linkWith = "linkWith";
networkSeries.nodes.template.label.text = "{name}"
networkSeries.fontSize = 10;
var selectedNode;
var label = chart.createChild(am4core.Label);
label.text = "Click on nodes to link"
label.x = 50;
label.y = 50;
label.isMeasured = false;
networkSeries.nodes.template.events.on("up", function (event) {
var node = event.target;
if (!selectedNode) {
node.outerCircle.disabled = false;
node.outerCircle.strokeDasharray = "3,3";
selectedNode = node;
}
else if (selectedNode == node) {
node.outerCircle.disabled = true;
node.outerCircle.strokeDasharray = "";
selectedNode = undefined;
}
else {
var node = event.target;
var link = node.linksWith.getKey(selectedNode.uid);
if (link) {
node.unlinkWith(selectedNode);
}
else {
node.linkWith(selectedNode, 0.2);
}
}
})
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>