Open endszh opened 1 week ago
https://g6.antv.antgroup.com/zh/examples/plugin/hull/#basic
1.设置如下坐标的3个节点,layout为none,轮廓显示异常 (Grid 网格布局,用轮廓包裹3个相邻的同一列的节点,有同样的显示异常)
import { Graph } from '@antv/g6'; fetch('https://assets.antv.antgroup.com/g6/collection.json') .then((res) => res.json()) .then((data) => { data = { "nodes": [ { "id": "node-0", "data": { "cluster": "a" }, "style": { x: 0, y:0, "size": 50 } }, { "id": "node-1", "data": { "cluster": "a" }, "style": { x: 0, y:100, "size": 30 } }, { "id": "node-4", "data": { "cluster": "a" }, "style": { x: 0, y:200, "size": 30 } }, ], } const groupedNodesByCluster = data.nodes.reduce((acc, node) => { const cluster = node.data.cluster; acc[cluster] ||= []; acc[cluster].push(node.id); return acc; }, {}); const createStyle = (baseColor) => ({ fill: baseColor, stroke: baseColor, labelFill: '#fff', labelPadding: 2, labelBackgroundFill: baseColor, labelBackgroundRadius: 5, }); const graph = new Graph({ container: 'container', data, behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'], node: { palette: { field: 'cluster' }, }, layout: { // type: 'force', // preventOverlap: true, // linkDistance: (d) => { // if (d.source === 'node0' || d.target === 'node0') { // return 200; // } // return 80; // }, }, plugins: [ { key: 'hull-a', type: 'hull', members: groupedNodesByCluster['a'], labelText: 'cluster-a', ...createStyle('#1783FF'), }, { key: 'hull-b', type: 'hull', members: groupedNodesByCluster['b'], labelText: 'cluster-b', ...createStyle('#00C9C9'), }, { key: 'hull-c', type: 'hull', members: groupedNodesByCluster['c'], labelText: 'cluster-c', ...createStyle('#F08F56'), }, { key: 'hull-d', type: 'hull', members: groupedNodesByCluster['d'], labelText: 'cluster-d', ...createStyle('#D580FF'), }, ], autoFit: 'center', }); graph.render(); });
🆕 5.x
Windows
Chrome, Edge
No response
参考 Quoting code 格式化你的代码
Describe the bug / 问题描述
Reproduction link / 重现链接
https://g6.antv.antgroup.com/zh/examples/plugin/hull/#basic
Steps to Reproduce the Bug or Issue / 重现步骤
1.设置如下坐标的3个节点,layout为none,轮廓显示异常 (Grid 网格布局,用轮廓包裹3个相邻的同一列的节点,有同样的显示异常)
G6 Version / G6 版本
🆕 5.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome, Edge
Additional context / 补充说明
No response