G6
G6 copied to clipboard
antvis
comboCombined布局下innerLayout为grid时，grid里的cols部分展示失效
问题描述
layout: { type: 'comboCombined', groupByTypes: true, preventOverlap: true, spacing: 20, outerLayout: new G6.Layout['dagre']({ rankdir: 'LR', sortByCombo: false, ranksep: 100, nodesep: 50, }), innerLayout: new G6.Layout['grid']({ cols: 5, preventOverlap: true, nodeSize: 60, condense: false }), } 布局设置为这个样子，部分集合里面的节点没有按照cols为5展示
重现链接
无
重现步骤
import G6 from "@antv/g6"; let data = { nodes: [{ id: "node" }], edges: [], combos: [ { id: "combo-0", label: "combo-0", count: 20 }, { id: "combo-1", label: "combo-1", count: 6 }, { id: "combo-2", label: "combo-2", count: 9 }, { id: "combo-3", label: "combo-3", count: 14 }, { id: "combo-4", label: "combo-4", count: 17 }, { id: "combo-5", label: "combo-5", count: 8 }, { id: "combo-6", label: "combo-6", count: 2 }, { id: "combo-7", label: "combo-7", count: 10 }, { id: "combo-8", label: "combo-8", count: 20 }, { id: "combo-9", label: "combo-9", count: 18 }, { id: "combo-10", label: "combo-10", count: 12 } ] } const container = document.getElementById("container"); const graph = new G6.Graph({ container, width: container.scrollWidth, height: container.scrollHeight || 650, fitView: true, modes: { default: ["drag-canvas", "zoom-canvas", "drag-combo"] }, defaultCombo: { type: "rect", stoke: "#b4b4b4", padding: [30, 30, 30, 30], style: { stroke: "#b4b4b4", radius: 10 }, labelCfg: { position: "bottom", refY: 25, style: { fill: "#222222", fontSize: 14 } } }, animate: false, defaultNode: { size: 40, type: "circle", style: { lineWidth: 0, // 节点描边粗细 fill: "#5192f5" // 填充色 }, labelCfg: { position: "bottom", style: { fontSize: 12 } } }, defaultEdge: { type: "line", size: 3, style: { cursor: "pointer" }, labelCfg: { autoRotate: true, style: { fontSize: 8 } } }, layout: { type: "comboCombined", groupByTypes: true, preventOverlap: true, // spacing: 20, outerLayout: new G6.Layout["dagre"]({ rankdir: "LR", sortByCombo: false, ranksep: 100, nodesep: 50 }), innerLayout: new G6.Layout["grid"]({ cols: 5, preventOverlap: true, nodeSize: 60, condense: false }) } }); data.combos.forEach((combo, index) => { if (index % 2 === 1) { data.edges.push({ source: combo.id, target: "node", style: { startArrow: true } }); } else { data.edges.push({ source: "node", target: combo.id, style: { endArrow: true } }); } for (let i = 0; i < combo.count; i++) { let node = { id: combo.id + i + index, comboId: combo.id }; data.nodes.push(node); } }); graph.data(data); graph.render();
if (typeof window !== "undefined") { window.onresize = () => { if (!graph || graph.get("destroyed")) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); }; }
预期行为
复制步骤里的代码，在图表展例里随便找一个案件粘贴就可以看到目前的效果，想达到每个集合里面的每一行只展示五个
平台
无
屏幕截图或视频（可选）
无
补充说明（可选）
无
