antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.16k stars 1.33k forks source link

Plug-in-Hull Node set outline wrapping, there are only 3 nodes and at a specific location, the outline is displayed abnormally #6520

Open endszh opened 1 week ago

endszh commented 1 week ago

Describe the bug / 问题描述

屏幕截图 2024-11-15 090758

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个相邻的同一列的节点,有同样的显示异常)

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();
  });

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome, Edge

Additional context / 补充说明

No response

Aarebecca commented 1 week ago

参考 Quoting code 格式化你的代码