antvis/G6

自定义节点,节点上下之间的间距设定为相等的固定值,无效果 #6073

GhostYDFQ posted onGitHub

问题描述: 自定义节点,宽度一致,高度不定的时候。节点上下之间的间距设定为相等的固定值,但是无效果

操作系统: Windows

浏览器 Chrome

我希望连接线可以不对称,但是上下之间的间距必须是要相同。于是,我设置了节点之间的间距为一个定值。实际上还是不生效的。

getVGap: function getVGap(d) { return 200; }

实际上节点之间的上下间距还是大小不一


请提供一个可以复现问题的最小案例代码,方便我们定位问题哦~

posted by yvonneyx 9 months ago

首先我的需求是一个自左向右的树结构,有一个根节点和 5 - 8个不定的子节点。 因此,在布局上我选择了 compactBox 布局的形式。因为根节点本身无所谓。主要是子节点

以下是我的自定义节点

initCustomNode() {
   const that = this;
   G6.registerNode('custom-node', {
      draw(cfg, group) {
        if (cfg.depth === 0) {
           return that.drawRootNode(cfg, group);
         }
         return that.drawOtherNode(cfg, group);
      },
       getAnchorPoints() {
          return [
            [0, 0.5], // 左边中心点
            [0.98, 0.5], // 右边中心点
          ];
        },
      })
    },
drawOtherNode(cfg, group) {
   const width = 220;
   const height = cfg.height; // 这里的每个子节点高度都是不等的

   const shape = group.addShape('rect', {
       attrs: {
          x: -width / 2,
          y: -height / 2,
          width,
          height,
          fill: 'l(0) 0:#DBF1FF 0.3:#E8F6FF 1:#F6FBFF',
          radius: 8,
          lineWidth: 0,
       }
   });
    return shape;
}
  • 然后我设置了垂直间距
    getVGap: function getVGap(d) {
     return 200;
    }
    结果是这个垂直间距是不生效的
posted by GhostYDFQ 9 months ago

我的预期是希望子节点上下之间的空白间距为一个定值。但是实际结果却并非如此

posted by GhostYDFQ 9 months ago

现有布局暂不支持该诉求,目前仅能通过自定义布局实现

posted by Aarebecca 9 months ago

Fund this Issue

$0.00
Funded

Pull requests