Highlight the selected node path

[Jomimoses]

Describe the solution you'd like I need the solution to highlight the entire node path by clicking the particular node. the ultimate goal is to updating the color without re-render

Describe alternatives you've considered I tired to get all the children node ids by click and updated the color values, but it requires re-render to update the colors in chart

`
const scoreChart = Sunburst().color(getColor).onClick(onItemClick)

    const getColor = (value) => {
    const { count, id } = value;
    let color = graphColors.solidColor[Math.floor(Number(count ?? "N/A"))];
    if (selectedIds.length === 0) return color;
    if (selectedIds.includes(id)) {
        return color;
    } else {
        return `${color}66`;  // HEX color with 40% opacity
    }
};
const onItemClick = (rowData) => {
    if (rowData) {
        let ids = [];
        const getAllId = (value) => {
            if (value.id) ids.push(value.id);
            if (value?.children?.length > 0) {
                for (const row of value.children) {
                    getAllId(row);
                }
            }
        };
        getAllId(rowData);
        setSelectedIds(ids);
    }
};

`

Additional context @vasturiano Expected result without re-rendering

[vasturiano]

@Jomimoses thanks for reaching out.

There's context missing to give a better answer, f.e. the implementation of setSelectedIds. Could you make a reduced example on https://codepen.io/ ?

[Jomimoses]

@Jomimoses thanks for reaching out.

There's context missing to give a better answer, f.e. the implementation of setSelectedIds. Could you make a reduced example on https://codepen.io/ ?

Here is the example https://codepen.io/jomimoses/pen/PoQVydB

[vasturiano]

Thanks for that @Jomimoses.

I see, it's a React application. The real issue is that you're re-instantiating a SunburstChart at every component re-render. That leads to a reinitialization of the component and a start from scratch. You shouldn't need to do that. Just instantiate the chart once and reuse it on sequential updates. You may want to do a similar thing with the data structure, memoize it at component mount so you can reuse it on incremental updates.