增加一点代码可以实现
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">