apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.26k stars 19.61k forks source link

[Bug] Edge Arrows Do Not scale on zoom in/out #19311

Open ahas36 opened 10 months ago

ahas36 commented 10 months ago

Version

5.4.1

Link to Minimal Reproduction

https://codesandbox.io/s/echart-graph-arrow-head-scale-issue-k9pkcs?file=/src/index.js

Steps to Reproduce

  1. Create a graph with nodes and directed edges.
  2. Implement zoom functionality on the graph.
  3. Observe the relative sizes of nodes and edge arrows as the zoom level changes.

Current Behavior

When zooming in and out on a graph, the nodes scale properly, but the arrows on the edges do not. This results in a visual imbalance where the arrows appear disproportionately large or small compared to the nodes at different zoom levels, leading to a degradation in the readability and aesthetic appeal of the graph.

Expected Behavior

The expectation is for the arrows on the edges to scale in proportion with the nodes, maintaining a consistent and relative size at all zoom levels. This would ensure a balanced and visually coherent graph representation, irrespective of the zoom.

Environment

- OS:Widnows 10
- Browser:Chrome Version 119.0.6045.159 (Official Build) (64-bit)
- Framework:React

Any additional comments?

I encountered this issue while working on a data visualization project that requires detailed graph representations. The lack of proportional scaling for edge arrows in zoomed views poses a significant challenge in maintaining the quality and effectiveness of the visualizations.

unreliable-tn commented 9 months ago

https://github.com/apache/echarts/assets/82098467/c0861aeb-c4c8-4758-9e19-8941c7a6083c

fixed in #19384