antvis/G6

【讨论】如何实现这种布局? #4569

mugo1993-ss posted onGitHub

问题描述

1.根据领导要求需要实现下图的布局。 image 2.目前采用的force2布局,但结果不是很理想,如何优化呢? image

重现链接

重现步骤

预期行为

1.希望能得到大家的建议

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


看下目前 force2 的参数配置。如果节点数据中没有 size 字段,可以给 force2 配置 nodeSize 大一些,默认是 30。minMovement 调整小一些,这会让迭代停止的条件严格一些。

posted by Yanyan-Wang almost 2 years ago

center设置:sourceNode.center = { x: ((cNlen % 20) - 5) * 80, y: (Math.floor(cNlen / 20) - 65) * 10 },先预设的中心点,设置center的是红色节点,cNlen为红色节点总个数 layout: { type: 'force2', preset: { type: 'radial', unitRadius: 30, }, preventOverlap: true, nodeSize: 80, nodeSpacing: (d) => { if (d.center) { return 100 } return 1 }, nodeStrength: 200, centripetalOptions: { single: 0.7, leaf: 10, others: 0.1, center: (node, nodes, edges, width, height) => { // 中心节点 if (node.source) { const sNode = nodes.find((n) => n.id === node.source) if (sNode.center) { return { x: sNode.center.x + width / 2, y: sNode.center.y + height / 2 } } else { return { x: width / 2, y: height / 2 } } } return { x: width / 2, y: height / 2 } }, }, },

posted by mugo1993-ss almost 2 years ago
posted by Yanyan-Wang almost 2 years ago

谢谢大佬 ヾ(≧▽≦)oヾ(≧▽≦)o

posted by mugo1993-ss almost 2 years ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00
Funded

Pull requests