apache / apache/echarts

[Bug] `thumbnail` zoom behaviour breaks on type `graph` when SVG path is used as `symbol`

Open
#21,514 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

6.0.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=graph-force&renderer=svg&code=dVVdb9owFH3vr_DDpoDGIMmAIqpOmtpJTAIxrR0Pm6bJSUxw59iZ40BpxX_f9UeIoV0eEvvc4-Tec66dN_2cqM635fL-99dP9zP0DgWDDCs8wFVFlB0yUr0vaEUkTmDYf6gED3poXfNUUcFRR-LdLfC66PkCoVTwSqFc4nKjQXRtUIS4yEg1RY7bN9N-gctORw-76Poj6lgmQjSbGn6fZj0HVfsiEeyOPhEXaoGGwnHRBPWwgVOsSC7k3oWaaRPeYlY3y8zY4Idu1xIcnfq5t5jlMMr_eGEzhcDhCm6iNBo1KiiqGHytKVSRRzVFwZxUaHEUODjWXCeOcEvWuGYKMbwXtToSlCghmAilRHEEGVnrJZLmGxXYYmxICcEUhRXPDmAkJxyk_ulWNlkhpG2ftiZ6FRvLWuud6c0liaolR2AvGKDLt9eh64YH8_xlP485LbB-zW0tzXOKolEYngU_44ry_HsJKYFwwd-ackXTL3x51AF0M_a8LMN2xP_kBUX2pY6bOj3Y6jITWyLn4OUUrTGrjv0EceMCLFwLmRJv4WDg-hRiSlLMc-aHXczTKyix2kwHg8WwF01WcTibrKLJbKinw1U0nun7EOZR6OIamMyicBGNHSUONSUaG8RwNAKc8SLuxfFqMr_sRfoRxe6p5_No0otncTSPDRrD-IeX6bn_Zrd6AtiGb-MGaOP-pnmtiVrm0eYXIkuBiylSsj7D7qGxcyK1bUwkmHlZPwkBSyJP8BQzMqcFBbP8Ni3wI_AuWyJAVLdf27G-2wkBQ_31paioTdptM_9N0BRQkjIpPicHuwXP3mka5_SdJMvJnPAc-gHFbhM0m6qsWWU-NzoJgLRbquBgC_ujkwwkNdtTB14tCddK3NRySzipwKJTkUlRbmDPAe6ntxZpDVCAswecEp7uT2oG_8md2vtHm712NNMFRaGH2kPAH50cC2pTFwnH1NPcvSWIRm-Pn90QrfwZuKM8E7sXmaSCCW2HzBPciYZhD8WwG1AMcmrtul4tiZAZkTf-gg_AGg970DAjTb_06aLEqbGg0dmWou_m-C_2NxssVR_-pUvzJ-jYH0L36uLQvfoH&enc=deflate

### Steps to Reproduce

1. Using the Les Miserables [`graph`](https://echarts.apache.org/en/option.html#series-graph.type) example, set the [`series.symbol`](https://echarts.apache.org/en/option.html#series-graph.symbol) as an SVG path. The SVG path used in the reproduction is the factory icon from the [mdi library](https://pictogrammers.com/library/mdi/icon/factory/).
2. Set graph to use 'force' for its [`layout`](https://echarts.apache.org/en/option.html#series-graph.layout) and add a [`force`](https://echarts.apache.org/en/option.html#series-graph.force) configuration
```
force: {
edgeLength: 20,
repulsion: 50,
gravity: 0.5,
friction: 0.1
}
```
3. Filter the Les Miserable graph data to only include properties needed, i.e. omit the x and y coordinates

### Current Behavior

When an SVG path is used for the [symbol](https://echarts.apache.org/en/option.html#series-graph.symbol) property on a chart series of type [graph](https://echarts.apache.org/en/option.html#series-graph.type), the thumbnail initialises its zoom incorrectly. The thumbnail shows the graph content as bottom-right and partially zoomed out.

### Expected Behavior

The thumbnail should show the graph content as centered and not zoomed out.

### Environment

```markdown
- OS: macOS Sequoia 15.7.3
- Browser: Firefox 147.0.3
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.