[Bug]: CubicVertical edge中label位置相反

[interstellarmt]

Describe the bug / 问题描述

edge配置如下：

edge: {
      type: "cubic-vertical",
      style: {
        endArrow: true,
        labelText: (e) => (e.data?.value || "") as string,
        labelFontSize: 12,
        labelAutoRotate: true,
        labelPlacement: "end",
        labelTextAlign: "start",
        labelMaxWidth: "100%",
        labelMaxLines: 2,
        labelTextOverflow: "ellipsis",
        labelFontWeight: 700,
      },
    }

Reproduction link / 复现链接

No response

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

• [x] macOS
• [ ] Windows
• [ ] Linux
• [ ] Others / 其他

Browser / 浏览器

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

[github-actions[bot]]

@interstellarmt 您好！以下是关于您问题的自动回复：

感谢反馈！根据你的描述，CubicVertical edge 的 label 位置与预期相反，这里给出分析和解决建议：

---

问题分析

• 你使用了 cubic-vertical 边类型，并设置了：

  labelPlacement: "end",
  labelTextAlign: "start",
  labelAutoRotate: true,
  

• 按 G6 官方文档，labelPlacement 可选值有：start、center（默认）、end 或具体的数值比例，分别对应边的起点、中点、终点。
• 对于弯曲的边（如 cubic-vertical），边的“终点”可能不是你视觉上期望的那一侧，有时 label 会出现在起点而非终点。

---

复现与排查建议

1. 确认 labelPlacement 行为

   • 尝试将 labelPlacement 改为 "start"，观察 label 是否出现在另一侧。
   • 使用 "center" 对比效果。

2. labelTextAlign 的影响

   • labelTextAlign 控制文字的对齐方式（如 start、end），如放在终点建议尝试 end 或 center 以获得更自然的视觉效果。

3. 版本兼容性

   • 确认 G6 版本为 5.x，部分属性行为在不同版本可能有差异。

---

推荐解决方法

• 尝试如下配置：

  edge: {
    type: "cubic-vertical",
    style: {
      endArrow: true,
      labelText: (e) => (e.data?.value || ""),
      labelFontSize: 12,
      labelAutoRotate: true,
      labelPlacement: "end", // 或尝试 "start"/"center"
      labelTextAlign: "center", // 或 "end"
      labelMaxWidth: "100%",
      labelMaxLines: 2,
      labelTextOverflow: "ellipsis",
      labelFontWeight: 700,
    },
  }
  

• 进阶方案：
  如果 label 仍然位置异常，考虑用数值比例控制，例如：

  labelPlacement: 1, // 0: 起点, 1: 终点, 0.5: 中点
  

  或根据视觉需求微调（如 0.95）。

---

参考文档

• labelPlacement 配置说明
• cubic-vertical 曲线属性
• label 样式参考

---

结论

• 请尝试上述方法排查并调整 label 的位置和对齐方式。
• 若仍有问题，可补充最小复现代码和截图，便于进一步定位。

如需进一步协助，请补充更多细节或复现链接！感谢支持 G6 项目。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。