Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
endszh opened this issue Nov 14, 2024 · 1 comment · Fixed by #6565
Labels
bug plugin Issue about plugin v5

Comments

@endszh
Copy link

endszh commented Nov 14, 2024

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

@github-actions github-actions bot changed the title 插件-Hull 节点集轮廓包裹,只有3个节点且在特定位置时,轮廓显示异常 Plug-in-Hull Node set outline wrapping, there are only 3 nodes and at a specific location, the outline is displayed abnormally Nov 14, 2024
@Aarebecca
Copy link
Contributor

参考 Quoting code 格式化你的代码

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug plugin Issue about plugin v5
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants