antvis/G6

[Bug]: Setting offsetX and offsetY in getLabelStyle does not take effect #6814

zmbxy posted onGitHub

Describe the bug / 问题描述

自定义边,在getLabelStyle中设置offsetX、offsetY不生效

import { BaseEdge, ExtensionCategory, Graph, register } from '@antv/g6';

class PolylineEdge extends BaseEdge {

  getKeyStyle(attributes) {
    return { ...super.getKeyStyle(attributes), lineWidth: 2, stroke: '#000' };
  }

  getLabelStyle(attributes) {
    const labelStyle = {
      ...super.getLabelStyle(attributes),
      offsetX: 30,
      offsetY: 30,
    }
    console.log(labelStyle);
    return labelStyle;
  }

  drawLabelShape(attributes, container) {
    const style = this.getLabelStyle(attributes);
    this.upsert('label', Label, style, container);
  }

  getKeyPath(attributes) {
    const [sourcePoint, targetPoint] = this.getEndpoints(attributes);

    return [
      ['M', sourcePoint[0], sourcePoint[1]],
      ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], sourcePoint[1]],
      ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], targetPoint[1]],
      ['L', targetPoint[0], targetPoint[1]],
    ];
  }
}

register(ExtensionCategory.EDGE, 'custom-polyline', PolylineEdge);

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [
      { id: 'node-0', style: { x: 100, y: 100, ports: [{ key: 'right', placement: [1, 0.5] }] } },
      { id: 'node-1', style: { x: 250, y: 200, ports: [{ key: 'left', placement: [0, 0.5] }] } },
    ],
    edges: [{ source: 'node-0', target: 'node-1' }],
  },
  edge: {
    type: 'custom-polyline',
    style: {
      startArrow: true,
      endArrow: true,
      stroke: '#000',
      labelText: '12313',
    },
  },
  behaviors: ['drag-element'],
});

graph.render();

<img width="1221" alt="Image" src="https://github.com/user-attachments/assets/453f2700-a8a6-4481-b0f0-bdcc67aafe55" />

预期:

<img width="1136" alt="Image" src="https://github.com/user-attachments/assets/81ddb953-f04f-48ef-a82c-f5feb759b94d" />

No response

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

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

在您的代码中,您尝试在 getLabelStyle 方法中设置 offsetXoffsetY,但这些属性似乎没有生效。这个问题可能与 upsert 方法的实现有关,或者与 Label 的处理方式有关。

以下是一些可能的解决方案和检查步骤:

  1. 检查 upsert 方法:确保 upsert 方法正确地应用了 offsetXoffsetY。如果 upsert 方法没有考虑这些属性,您可能需要修改它以支持这些偏移量。

  2. 验证 Label 的实现:确保 Label 组件能够接受并正确处理 offsetXoffsetY 属性。

  3. 调试日志:您已经在 getLabelStyle 中使用了 console.log 来输出 labelStyle。请确保这些日志显示的值是正确的,并且在 upsert 方法中没有被覆盖或忽略。

  4. 检查 G6 文档:确认 offsetXoffsetY 是在当前版本的 G6 中支持的属性,并且它们的用法符合文档说明。

如果这些步骤没有解决问题,您可能需要查看 G6 的源代码或相关文档,以确保这些属性在自定义边中是可用的。

如果需要进一步的帮助,请随时告诉我。

<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] about 2 months ago

getLabelStyle 中 不存在 offsetX、offsetY 属性,你可以用下面的方式来实现相同的效果:

Image

posted by zhongyunWan about 2 months ago

Fund this Issue

$0.00
Funded

Pull requests