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

Question

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!

Answer 1

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.