echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] Tree chart: expanded/collapsed state of parent nodes is reset on zoom

Open undeletable opened this issue 1 year ago • 5 comments

Version

5.4.3

Link to Minimal Reproduction

https://jsfiddle.net/undeletable/zrau5scd/

Steps to Reproduce

  1. Create tree chart.
  2. Expand/collapse some nodes, so that overall state is different from the initial one.
  3. 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

undeletable avatar Nov 10 '23 18:11 undeletable

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 avatar Nov 10 '23 23:11 helgasoft

@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.

undeletable avatar Nov 10 '23 23:11 undeletable

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.

helgasoft avatar Nov 11 '23 19:11 helgasoft

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.

undeletable avatar Nov 13 '23 21:11 undeletable

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

FrontMizfaTools avatar Apr 18 '24 06:04 FrontMizfaTools