echarts
echarts copied to clipboard
[Bug] Tree chart: expanded/collapsed state of parent nodes is reset on zoom
Version
5.4.3
Link to Minimal Reproduction
https://jsfiddle.net/undeletable/zrau5scd/
Steps to Reproduce
- Create tree chart.
- Expand/collapse some nodes, so that overall state is different from the initial one.
- Change chart zoom.
Current Behavior
Expanded/collapsed state of nodes is reset to the initial one. Obviously, that occurs because change of series
value call triggers chart rerender. Note that this is the case even if reference to series
remains unchanged (see https://jsfiddle.net/undeletable/z8cvfg23/).
Expected Behavior
According to https://github.com/apache/echarts/issues/16743, dataZoom
property is not supported for tree charts. So the only way to change zoom is to change series.zoom
property in options. Obviously, this triggers chart rerender, but as a user I'd expect chart state to be persisted if only zoom changes - no matter if it's done using current way, or if any analog for dataZoom
is introduced.
Environment
- OS:Linux Mint 19.3
- Browser:Google Chrome 119.0.6045.123
- Framework:Vanilla JS, React
Any additional comments?
No response
the only way to change zoom is to change series.zoom property in options.
did you try roam:true
for zooming ? Just add it in the tree series of the official example
@helgasoft
roam
value is true
in both examples I've provides links to. I believe there might be a kind of confusion here. When I say 'zooming' in context of this issue, I mean zoom in/zoom out using external UI controls (like buttons, as it can be seen in my example), not zooming by msing mouse wheel or anything similar.
ok, got it, and feel your pain. Controlling by zoom is tough (to the point of impractical) since one has to save all collapse/expand user actions, like myChart.on('click', 'series', (x) => { console.log(x.treeAncestors, x.collapsed) })
,
then restore them after each manual zoom.
I was able to work this around without introducing additional complication of preserving the nodes state. Instead of using series.zoom
, I just change width and height of parent element (e.g., if initial width is 1000px, the width after 1.5x zoom would be 1500px), and when they change, I call resize()
method of chart instance, passing {height: "auto", width: "auto"}
as argument.
Have the same issue. why should setOption series reset the state of nodes ?! for example i want to use a slider to change the fontSize of tree labels which is in series but the expand and collapse will reset for whole data