antvis / antvis/layout

Circular布局能够支持椭圆形布局

Open
#221 0 comments 0 reactions 0 assignees View on GitHub
layout/circular
Dominant language
TypeScript
Stars
276
Forks
60
PR merge metrics
No merged PRs in 30d

Description

开发者您好,我在使用Circular布局时,发现如果是Circle类型的节点,可以完美适配,但对于矩形(Rect)等宽高不一致的场景时,经常会导致节点重叠,此时除了增加半径并无更多办法。 我想到一个比较好的适配是,针对矩形等场景,可以设置为椭圆形布局,这样可以增大横向间距,从而让布局更加自然。参考下方两个图:
![image](https://github.com/antvis/layout/assets/24784430/b3df6c0f-c8ef-43d6-a3d8-fa6e21037bd1)
![image](https://github.com/antvis/layout/assets/24784430/f415dfac-f719-4c55-8cae-1991bea369b5)

简单的demo可以参考[链接](https://codesandbox.io/p/sandbox/intelligent-archimedes-q66s77?file=%2Findex.js%3A74%2C15)

Contributor guide

Open the contributing guide

Research direction

Start by reading the Circular layout implementation and the linked CodeSandbox demo to understand the current circle behavior for rectangular nodes. Add support for an elliptical arrangement that reduces overlap for nodes with unequal width and height, then verify the result against the demo scenarios.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.