amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
345 stars 92 forks source link

Replicating a chord diagram #1696

Closed Flux690 closed 3 weeks ago

Flux690 commented 3 weeks ago

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 CHORD_ONLY 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

Flux690 commented 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.

martynasma commented 3 weeks ago

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