AmCharts 4 Force Directed Chart - Select Bubble by Parent -> Child Location

Using the demo chart available from the AmCharts website (here), if I know the parent Phoebe, and the child David, how can I programmatically get the David bubble?

My goal is to alter the fill of the bubble, which I can do in an event handler. I just am uncertain of how to select the element I want programmatically, given what I have to work with.

Edit: I realize that I can just traverse graph.data and modify the color attribute, but I can't call graph.invalidateRawData() as that doesn't pick up the coloring change (makes sense). I really would rather not have to force a complete graph redraw!

Thanks!

Answers:

Answer

The easiest way to get a desired node would be to set id data field (it can be the same as your name field) and use series.getDataItemById method to retrieve the data item.

function changeColor(){
let dataItem = networkSeries.getDataItemById(networkSeries.dataItems, "Fifth");
dataItem.node.circle.fill = am4core.color("#00ff00");

// change color of all children
dataItem.children.each(function(child){
    child.node.circle.fill = am4core.color("#00ffff");
})
}

Here is a demo: https://codepen.io/team/amcharts/pen/mZMYKx

The demo also illustrates how access and change color of all children of the data item.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.