Highlighting links of a force-directed node on hover

This demo uses pointerover and pointerout events on force-directed series' nodes, to automatically highlight all links going out of it. It makes use of an array of links contained in node's data item's links setting to automatically apply or remove "active" state.

Code

series.links.template.setAll({
  strokeWidth: 1,
  strokeOpacity: 0.5
});

series.links.template.states.create("active", {
  strokeWidth: 3,
  strokeOpacity: 1
});

series.nodes.template.events.on("pointerover", function(ev) {
  am5.array.each(ev.target.dataItem.get("links"), function(link) {
    link.set("active", true);
  });
});

series.nodes.template.events.on("pointerout", function(ev) {
  am5.array.each(ev.target.dataItem.get("links"), function(link) {
    link.set("active", false);
  });
});

series.links.template.setAll({
  strokeWidth: 1,
  strokeOpacity: 0.5
});

series.links.template.states.create("active", {
  strokeWidth: 3,
  strokeOpacity: 1
});

series.nodes.template.events.on("pointerover", function(ev) {
  am5.array.each(ev.target.dataItem.get("links"), function(link) {
    link.set("active", true);
  });
});

series.nodes.template.events.on("pointerout", function(ev) {
  am5.array.each(ev.target.dataItem.get("links"), function(link) {
    link.set("active", false);
  });
});

Demo

See the Pen Force-directed chart with cross-linked nodes by amCharts team (@amcharts) on CodePen.