[Feat]: 节点的标签怎么旋转90度

[xiaozhuzhr]

Describe the feature / 功能描述

我希望节点的标签可以旋转90度显示

Are you willing to contribute? / 是否愿意参与贡献？

✅ Yes / 是

[github-actions[bot]]

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

您好，感谢您的建议！

关于“节点的标签怎么旋转90度”，您可以通过设置节点标签的 labelTransform 属性来实现标签的旋转显示。下面是实现方法和示例代码：

实现方式

G6 支持通过 labelTransform 属性对节点标签进行平移、旋转等变换。例如，旋转 90 度：

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 400,
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 100, labelText: '旋转标签', labelTransform: [['rotate', 90]] } },
      { id: 'node2', style: { x: 300, y: 100, labelText: '标签2', labelTransform: [['rotate', 90]] } },
    ],
    edges: [],
  },
  node: {
    style: {
      labelFontSize: 14,
      labelFill: '#333',
    },
  },
});

graph.render();

说明

• labelTransform: [['rotate', 90]] 表示将标签旋转 90 度（注意单位为度）。
• 可根据实际需要，结合 labelTextAlign、labelTextBaseline 等参数，调整标签的对齐方式和位置。

进阶：批量设置所有节点标签旋转

如果需要对所有节点统一设置，可以在节点样式配置中添加：

node: {
  style: {
    labelTransform: [['rotate', 90]],
    // 其他标签样式
  }
}

参考文档

• G6 官方手册：节点标签 transform

---

如果您愿意贡献代码，欢迎提交 PR 或分享您的实现思路，我们会及时跟进与协助！

如有更多定制化需求或遇到问题，欢迎继续反馈。😊

---

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