antvis/G6

[Bug]: How to adjust the position of the child combo so that it is centered on the parent combo #6752

ltdys posted onGitHub

Describe the bug / 问题描述

如何调整子combo的位置,让它在父combo的中心

No response

Steps to Reproduce the Bug or Issue / 重现步骤

现在的:Image

期待的:Image

G6 Version / G6 版本

4.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

您提到的问题是关于如何调整子 combo 的位置,使其居中于父 combo。虽然您使用的是 G6 4.x 版本,但我将为您提供 G6 5.0 版本的解决方案,因为这是最新的版本。

在 G6 5.0 中,您可以通过以下步骤来实现子 combo 居中于父 combo:

  1. 获取父 combo 的中心坐标:首先,您需要获取父 combo 的中心坐标。可以通过 graph.findById(parentComboId).getBBox() 获取父 combo 的边界框,然后计算中心点。

  2. 设置子 combo 的位置:将子 combo 的位置设置为父 combo 的中心点。可以使用 graph.updateItem(childComboId, { x: centerX, y: centerY }) 来更新子 combo 的位置。

以下是一个简单的代码示例:

const parentCombo = graph.findById(parentComboId);
const bbox = parentCombo.getBBox();
const centerX = bbox.minX + bbox.width / 2;
const centerY = bbox.minY + bbox.height / 2;

graph.updateItem(childComboId, { x: centerX, y: centerY });

请确保在更新子 combo 位置后调用 graph.refresh() 来重新渲染图形。

如果您有任何进一步的问题或需要更多帮助,请随时告诉我!

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 3 months ago

Fund this Issue

$0.00
Funded

Pull requests