箭头被节点挡住

[zhxzhx]

问题描述

箭头被节点挡住

重现链接

无

重现步骤

箭头显示的位置是节点的开头位置，箭头被节点挡住了，但是把我写的代码放在编辑器里面是可以显示出来箭头的，如下图

我看编辑器也是4.8.7的版本，我安装也是 4.8.7的版本 "@antv/g6": "^4.8.7",

预期行为

平台

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

屏幕截图或视频（可选）

无

补充说明（可选）

G6.registerNode('card-node', { draw(cfg, group) { // const t: any = this // const styles = t.getShapeStyle(cfg) const { labelCfg = {} } = cfg

const w = cfg.size[0]
const h = cfg.size[1]

const keyShape = group.addShape('rect', {
  attrs: {
    // ...styles,
    x: -w / 2,
    y: -h / 2,
    width: w, //200,
    height: h, // 60
    fill:
      cfg.status == 1
        ? '#52c41a'
        : cfg.status == 2
        ? '#5f95ff'
        : '#808080'
  }
})
if (cfg.name) {
  group.addShape('text', {
    attrs: {
      ...labelCfg.style,
      text:
        cfg.name.split('&')[0].length > 8
          ? cfg.name.substring(0, 8) + '...'
          : cfg.name.split('&')[0],
      y: cfg.name.indexOf('&') >= 0 ? -10 : 0,
      textAlign: 'center',
      textBaseline: 'middle'
    }
  })
  group.addShape('text', {
    attrs: {
      ...labelCfg.style,
      text: cfg.name.split('&')[1],
      y: 22,
      textAlign: 'center'
    }
  })
  if (cfg.children && cfg.children.length) {
    group.addShape('rect', {
      attrs: {
        x: 68,
        y: -10,
        width: 16,
        height: 16,
        stroke: 'rgba(0, 0, 0, 0.25)',
        cursor: 'pointer',
        fill: '#fff',
        radius: 8
      },
      name: 'collapse-back',
      modelId: cfg.id
    })
    group.addShape('text', {
      attrs: {
        x: 80,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.collapsed ? '+' : '-',
        fontSize: 20,
        cursor: 'pointer',
        fill: 'rgba(0, 0, 0, 0.25)'
      },
      name: 'collapse-text',
      modelId: cfg.id
    })
  }
}
return keyShape

}, setState(name, value, item) { if (name === 'collapse') { const group = item.getContainer() const collapseText = group.find( (e) => e.get('name') === 'collapse-text' ) if (collapseText) { if (!value) { collapseText.attr({ text: '-' }) } else { collapseText.attr({ text: '+' }) } } } } });

const data = { id: 'ffff', name: '北京能源ffff', echoDisplayId: null, status: 1, nextNodeId: '0', children: [] };

const container = document.getElementById('container'); const width = container.scrollWidth-8; const height = container.scrollHeight * 30 || 500;

const graph = new G6.TreeGraph({ container: 'container', width, height, modes: { default: ['drag-canvas','zoom-canvas'], }, defaultNode: { type: 'card-node', size: [160, 50], labelCfg: { style: { fill: '#fff', fontSize: 16 } } }, defaultEdge: { type: 'cubic-horizontal', // 线的展示方式 style: { startArrow: true, stroke: '#a2b1c3' } }, layout: { type: 'indented', direction: 'LR', dropCap: false, indent: 300, getHeight: function getHeight() { return 20 } } });

graph.data(data); graph.render(); graph.fitView();

[Yanyan-Wang]

anchorPoints 了解一下哈 https://g6.antv.antgroup.com/manual/middle/elements/nodes/anchorpoint

[KaygNas]

我也遇到类似的问题，我自定义了节点并拓展自 ‘circle’，最后发现是 KeyShape 的尺寸过小导致的，节点 KeyShape 应该由 size 属性控制，你可以检查一下是否正确？

另外好像也可能和 'defaultNode' 的配置有关，我只有设置为 'defaultNode' 的自定义节点会出现这样的问题，移除之后就没问题了。

[github-actions[bot]]

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。