Force-Directed Tree with directional labels on links
This demo shows how we can use Hierarchy bullets to add directional labels on Force-Directed Tree links.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
const singlePointCode = [ { exchangeName: "CL6", pointCode: 4590, links: ["CH6", "CB6"], value: 20 },
{ exchangeName: "CH6", pointCode: 5890, links: ["CB6"], value: 20 },
{ exchangeName: "CB6", pointCode: 4591, links: [], value: 20 }];
// Create root and chartvar root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
var container = root.container.children.push( am5.Container.new(root, { width: am5.percent(100), height: am5.percent(100), layout: root.verticalLayout }));
var series = container.children.push( am5hierarchy.ForceDirected.new(root, { topDepth: 1, downDepth: 1, initialDepth: 1, manyBodyStrength: -80, centerStrength: 1.3, nodePadding: 45, categoryField: "exchangeName", childDataField: "children", idField: "exchangeName", linkWithField: "links", minRadius: 50, maxRadius: 50, xField: "x", yField: "y" }));
series.outerCircles.template.states.create("disabled", { fillOpacity: 0.5, strokeOpacity: 0, strokeDasharray: 0});
series.outerCircles.template.states.create("hoverDisabled", { fillOpacity: 0.5, strokeOpacity: 0, strokeDasharray: 0});
series.links.template.setAll({ strokeWidth: 6, strokeOpacity: 0.3});
// Adding Link Labelsseries.linkBullets.push(function (root, source, target) { const sourceNode = source.get("node"); const targetNode = target.get("node");
const sourceData = source.dataContext; const targetData = target.dataContext;
var sprite = am5.Label.new(root, { visible: true, text: `${sourceData.exchangeName} - ${targetData.exchangeName}`, fill: am5.color(0x000000), centerX: am5.p50, centerY: am5.p100 });
sprite.adapters.add("x", function (x, target) { var angle = (Math.atan2(targetNode.y() - sourceNode.y(), targetNode.x() - sourceNode.x()) * 180) / Math.PI; if (angle > 90 || angle < -90) { angle = angle + 180; } sprite.set("rotation", angle); return x; });
return am5.Bullet.new(root, { locationX: 0.5, sprite: sprite });});
series.data.setAll([{ children: singlePointCode }]);<div id="chartdiv"></div>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: 98vh;}{ "type": "SerialChartContainer", "settings": { "layout": { "type": "VerticalLayout" } }, "properties": { "series": [ "#series-0" ] }, "refs": [ { "data-0": [ { "children": [ { "exchangeName": "CL6", "pointCode": 4590, "links": [ "CH6", "CB6" ], "value": 20, "__parse": true }, { "exchangeName": "CH6", "pointCode": 5890, "links": [ "CB6" ], "value": 20, "__parse": true }, { "exchangeName": "CB6", "pointCode": 4591, "links": [], "value": 20, "__parse": true } ], "__parse": true } ] }, { "series-0": { "type": "ForceDirected", "settings": { "topDepth": 1, "downDepth": 1, "initialDepth": 1, "manyBodyStrength": -80, "centerStrength": 1.3, "nodePadding": 45, "categoryField": "exchangeName", "childDataField": "children", "idField": "exchangeName", "linkWithField": "links", "minRadius": 50, "maxRadius": 50, "xField": "x", "yField": "y" }, "properties": { "data": "#data-0", "links": { "properties": { "template": { "settings": { "strokeWidth": 6, "strokeOpacity": 0.3 } } } }, "outerCircles": { "properties": { "template": { "states": [ { "key": "disabled", "settings": { "fillOpacity": 0.5, "strokeOpacity": 0, "strokeDasharray": 0 } }, { "key": "hoverDisabled", "settings": { "fillOpacity": 0.5, "strokeOpacity": 0, "strokeDasharray": 0 } } ] } } }, "linksContainer": { "children": [ { "type": "Label", "settings": { "visible": true, "text": "CL6 - CH6", "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 50 }, "centerY": { "type": "Percent", "value": 100 }, "rotation": 66.65731525699186, "x": 460.9561825702176, "y": 304.78557725200267 }, "index": 1 }, { "type": "Label", "settings": { "visible": true, "text": "CL6 - CB6", "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 50 }, "centerY": { "type": "Percent", "value": 100 }, "rotation": 306.01601719933876, "x": 360.8524920109197, "y": 294.22193686368263 }, "index": 3 }, { "type": "Label", "settings": { "visible": true, "text": "CH6 - CB6", "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 50 }, "centerY": { "type": "Percent", "value": 100 }, "rotation": 6.0239559200979045, "x": 401.0019278223166, "y": 387.2570364894816 } } ] } } } } ]}force-directed-tree-with-directional-labels-on-links