antvis/G6

g6 legend api不支持图片和自定义节点,可通过其他方式实现吗? #4620

laibin-wang posted onGitHub

问题描述

自定义得节点在图列上显示不对

重现链接

重现步骤

预期行为

平台

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

屏幕截图或视频(可选)

image

补充说明(可选)

image


暂时不支持,看看有没有社区小伙伴愿意贡献一下~

其他的实现方法比如自己写个 DOM……

posted by Yanyan-Wang almost 2 years ago

增加一点代码可以实现

    addVertexIcon(legend) {
      const iconSet = ['./dis.svg', './dis.svg', './dis.svg', './dis.svg', './dis.svg', './dis.svg'];
      const { margin, padding, itemsData } = legend._cfgs;
      const canvas = legend.getContainer().querySelector("canvas");
      const ctx = canvas.getContext('2d');
      itemsData.nodes.forEach((node, index) => {
        const width = node.size;
        const height = node.size;
        const x = 0;
        const y = index * node.size + index * 12;
        const img = new Image();
        img.src = iconSet[index];
        img.onload = function () {
          ctx.drawImage(img, x, y, width, height);
        };
      });
    },

效果看起来是这样, 具体根据参数 layout, margin, padding, vertiSep, horiSep 调整 image x, y 值的计算方式。效果看起来是这样:

<img width="383" alt="image" src="https://github.com/antvis/G6/assets/1636616/594af92d-41b5-4f2b-a5cc-29ad3a030e6d">

posted by xiongchengqing over 1 year ago

这是来自QQ邮箱的假期自动回复邮件。你好,我最近正在休假中,无法亲自回复你的邮件。我将在假期结束后,尽快给你回复。

posted by laibin-wang over 1 year ago

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。

posted by github-actions[bot] 10 months ago

这是来自QQ邮箱的假期自动回复邮件。你好,我最近正在休假中,无法亲自回复你的邮件。我将在假期结束后,尽快给你回复。

posted by laibin-wang 10 months ago

Fund this Issue

$0.00
Funded

Pull requests