Closed Flux690 closed 3 weeks ago
Update- I was able to figure it out for my chords using the following piece of code-
series.links.template.events.on("pointerover", function(event) {
let hoveredLink = event.target;
let hoveredUid = hoveredLink.dataItem.uid;
// Iterate over all links
series.dataItems.forEach(function(dataItem) {
let link = dataItem.get("link");
if (link) {
if (link.dataItem.uid === hoveredUid) {
// Keep the hovered link at full opacity
link.set("fillOpacity", 0.86);
// console.log(link.dataItem.uid);
} else {
// Reduce opacity of all other links
link.set("fillOpacity", 0.3);
}
}
});
});
series.links.template.events.on("pointerout", function (event) {
// Reset opacity of all links when mouse is moved out
series.dataItems.forEach(function (dataItem) {
let link = dataItem.get("link");
if (link) {
link.set("fillOpacity", 0.86);
}
});
});
But I am facing the issue with nodes as I am not able to come up with a way to manipulate the links associated with a specific node.
You can grab link data items from a node by accessing incomingLinks
and outgoingLinks
in its data item:
series.nodes.nodes.template.events.on("pointerover", function(ev) {
console.log(ev.target.dataItem.get("incomingLinks"));
console.log(ev.target.dataItem.get("outgoingLinks"));
})
Question How can I modify the node and links behavior of a Chord Diagram in amCharts5?
I am trying to replicate a chord diagram as you can see in the image What I want is that when I click on a node or a chord itself, its opacity should remain at 0.85 while the opacity of all the other chords should dim down to 0.2 I expect the same behavior from my nodes as well. But I am not able to achieve it. If anyone knows how to tackle this issue, it would be greatly appreciated. I am attaching my code as well script.txt
Environment (if applicable) I am using html, css and plain js
Additional context