Enable dragging of ForceDirectedNode to fixed location
This demo shows how we can dynamically affix a ForceDirectedNode which was dragged by a user so that it stays permanently in the same place, by dynamically making it a “fixed node”.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
chart.data = [ { name: "Core", children: [ { name: "First", children: [ { name: "A1", value: 100 }, { name: "A2", value: 60 } ] },
{ name: "Second", children: [ { name: "B1", value: 135 }, { name: "B2", value: 98 } ] },
{ name: "Third", children: [ { name: "C1", children: [ { name: "EE1", value: 130 }, { name: "EE2", value: 87 }, { name: "EE3", value: 55 } ] },
{ name: "C2", value: 148 }, { name: "C3", children: [ { name: "CC1", value: 53 }, { name: "CC2", value: 30 } ] },
{ name: "C4", value: 26 } ] },
{ name: "Fourth", children: [ { name: "D1", value: 415 }, { name: "D2", value: 148 }, { name: "D3", value: 89 } ] },
{ name: "Fifth", children: [ { name: "E1", children: [ { name: "EE1", value: 33 }, { name: "EE2", value: 40 }, { name: "EE3", value: 89 } ] },
{ name: "E2", value: 148 } ] } ] }];
networkSeries.dataFields.value = "value";networkSeries.dataFields.name = "name";networkSeries.dataFields.children = "children";networkSeries.nodes.template.tooltipText = "{name}:{value}";networkSeries.nodes.template.fillOpacity = 1;
networkSeries.nodes.template.label.text = "{name}";networkSeries.fontSize = 10;
networkSeries.links.template.strokeWidth = 1;
var hoverState = networkSeries.links.template.states.create("hover");hoverState.properties.strokeWidth = 3;hoverState.properties.strokeOpacity = 1;
// disable physics for dragged nodesnetworkSeries.dragFixedNodes = true;networkSeries.nodes.template.events.on("dragstop", function (event) { event.target.dataItem.fixed = true;});
networkSeries.nodes.template.events.on("down", function (event) { event.target.dataItem.fixed = false;});// end of disabling physics
networkSeries.nodes.template.events.on("over", function (event) { event.target.dataItem.childLinks.each(function (link) { link.isHover = true; }); if (event.target.dataItem.parentLink) { event.target.dataItem.parentLink.isHover = true; }});
networkSeries.nodes.template.events.on("out", function (event) { event.target.dataItem.childLinks.each(function (link) { link.isHover = false; }); if (event.target.dataItem.parentLink) { event.target.dataItem.parentLink.isHover = false; }});<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: 550px; max-width: 100%;}forcedirectedtree-fix-dragged-nodes