自定义图形，nodes里面的x,y失效？

[wizali]

安装的版本是：

npm install @antv/g6

我自定义了几个图标，代码大致如下：

// 注册一个路由器的图标
G6.registNode('router', {
  draw: function(cfg, group) {
    group.addShape('path', {
      attrs: {
        path: 'M0 12.3 V28.9 A 24.9 11.0 0 1 0 49.8 28.9 V12.3 Z',
        fill: '#dbdde1'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 24.9,
        ry: 12.3,
        fill: '#e2e4e9'
      }
    });
    group.addShape('ellipse', {
      attrs: {
        x: 24.9,
        y: 12.3,
        rx: 23.5,
        ry: 11.6,
        fill: '#eeeff2'
      }
    });
    group.addShape('path', {
      attrs: {
        path: 'M2.3,10.1 L4.6,7.9 L16.5,9.6 L17.7,8.6 L20.5,11.7 L12.4,13.5 L13.6,12.2Z M24.8,10.0 L28.3,6.9 L26.4,6.4 L34.6,4.3 L34.1,7.6 L31.7,7.4 L27.9,11.1Z M28.0,12.7 L35.7,11.4 L34.6,12.5 L46.0,14.8 L43.8,16.9 L31.7,14.1 L29.6,16.2Z M20.7,13.9 L24.3,14.5 L20.0,18.5 L22.6,19.3 L14.6,20.8 L14.3,17.2 L16.5,17.7Z',
        fill: '#e85464'
      }
    });
    return group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 49.8,
        height: 40
      }
    });
  },
  afterDraw: function(cfg, group, router) {
    cfg.size = 10
    group.addShape('text', {
      attrs: {
        x: 20,
        y: 51.3,
        fontFamily: '宋体',
        text: cfg.label,
        stroke: '#000',
        textAlign: 'center'
      }
    });
  },
  getAnchorPoints: function(cfg, group) {
    return [
      [0.5, 1], // 上面边的中点
      [1, 0.5], // 右边边的中点
      [0.5, 0], // 下边边的中点
      [0, 0.5] // 左边边的中点
    ]
  }
});

然后我渲染的数据如下：

var nodes = [
  {
    "id": "595b5e7e1d41c86f00adc371",
    "name": "switch_center",
    "host_id": "switch_center",
    "node_ip": "10.10.2.1",
    "node_type": "05401202",
    "linked": "1",
    "weight": 40,
    "y": 358.36920299208396,
    "x": 636.8554312518343,
    "shape": "router"
  },
  .....
]

结果是，这一类图标渲染出来的位置在坐标原点。

[dxq613]

@antv/g6 是内部的版本，拿不到 g6 包的 npm 所有权所以没发到npm 上

[meikidd]

希望提供npm版本哦。如果拿不到 g6 的包名，是不是可以考虑换一个包名，G6 或者 antv-g6 之类的。

[wizali]

@dxq613 @meikidd
是的，对于React项目，还挺麻烦的，建议提供npm版本

[TomHuangCN]

@antv/g6 是外部版的。已经升级到 1.1.1。升级一下版本，能解决你这个问题

[wizali]

补充一个问题，自定义图形的"size"属性怎么设置呢？

[TomHuangCN]

cfg.size 含有 size 信息。自定义图形整个都是由你自己控制的，用其绘图属性控制它形状

[chaserstrong]

@TomHuangCN 我的版本是@antv/g6 3.1.0，也有这个问题，请问有解决办法吗？