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

TypeScript

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);
  });
});

JavaScript

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

Open in CodePen