antvis / antvis/Graphin

Graph not rendering with layout

Open
#406 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.1k
Forks
275
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

When running a basic graph with the below setup

```
const data = Utils.mock(11).circle().graphin();
const layout = {
type: "concentric",
nodeSize: 250
};
```

The graph renders badly and doesn't utilise the specified layout, however the same code renders correctly in CodewSandbox

This is the same code but one running locally and one running in CodeSandbox

### Your Example Website or App

https://codesandbox.io/s/graphin-example-mg1-ovrzj1

### Steps to Reproduce the Bug or Issue

1. Download my example from CodeSandbox
2. Run npm install
3. Run npm run start
4. Graphin example starts and displays graph badly rendered

### Expected behavior

As a user I would expect the rendering to be correct

### Screenshots or Videos

![image](https://user-images.githubusercontent.com/106314011/175057648-3160c712-a938-496c-b330-65f0d9a61ea8.png)
vs
![image](https://user-images.githubusercontent.com/106314011/175057717-8bf054e5-1285-4195-9142-c935bbecb496.png)

### Platform

- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox example and reproduce the issue locally using npm install followed by npm run start. Compare the local and CodeSandbox rendering for the concentric layout, then verify that the graph uses the specified layout and renders consistently in both environments.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
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.