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

如下代码,combo内的节点聚合后,line没有连接到combo上面。请问怎么设置,combo内的节点聚合后,line连接到combo上方 #6096

Open
sweetheartbaby opened this issue Jul 30, 2024 · 4 comments

Comments

@sweetheartbaby
Copy link

sweetheartbaby commented Jul 30, 2024

import G6 from '@antv/g6';
const data = {
  nodes: [
    {
      id: '0',
      label: '0',
    },
    {
      id: '1',
      label: '1',
    },
    {
      id: '2',
      label: '2',
    },
    {
      id: '3',
      label: '3',
    },
    {
      id: '4',
      label: '4',
      comboId: 'A',
    },
    {
      id: '5',
      label: '5',
      comboId: 'B',
    },
    {
      id: '6',
      label: '6',
      comboId: 'A',
    },
    {
      id: '7',
      label: '7',
      comboId: 'C',
    },
    {
      id: '8',
      label: '8',
      comboId: 'C',
    },
    {
      id: '9',
      label: '9',
      comboId: 'A',
    },
    {
      id: '10',
      label: '10',
      comboId: 'B',
    },
    {
      id: '11',
      label: '11',
      comboId: 'B',
    },
  ],
  edges: [
    {
      source: '0',
      target: '1',
      type: 'cubic-horizontal',
    },
    {
      source: '0',
      target: '2',
      type: 'cubic-horizontal',
    },
    {
      source: '1',
      target: '4',
      type: 'cubic-horizontal',
    },
    {
      source: '0',
      target: '3',
      type: 'cubic-horizontal',
    },
    {
      source: '3',
      target: '4',
      type: 'cubic-horizontal',
    },
    {
      source: '2',
      target: '5',
      type: 'cubic-horizontal',
    },
    {
      source: '1',
      target: '6',
      type: 'cubic-horizontal',
    },
    {
      source: '1',
      target: '7',
      type: 'cubic-horizontal',
    },
    {
      source: '3',
      type: 'cubic-horizontal',
      target: '8',
    },
    {
      source: '3',
      type: 'cubic-horizontal',
      target: '9',
    },
    {
      source: '5',
      type: 'cubic-horizontal',
      target: '10',
    },
    {
      source: '5',
      target: '11',
      type: 'cubic-horizontal',
    },
  ],
  combos: [
    {
      id: 'A',
      label: 'combo A',
      style: {
        fill: '#C4E3B2',
        stroke: '#C4E3B2',
      },
    },
    {
      id: 'B',
      label: 'combo B',
      style: {
        stroke: '#99C0ED',
        fill: '#99C0ED',
      },
    },
    {
      id: 'C',
      label: 'combo C',
      style: {
        stroke: '#eee',
        fill: '#eee',
      },
    },
  ],
};

data.nodes.forEach((node) => {
  switch (node.ComboId) {
    case 'A':
      node.style = {
        fill: '#C4E3B2',
        stroke: '#aaa',
      };
      break;
    case 'B':
      node.style = {
        fill: '#99C0ED',
        stroke: '#aaa',
      };
      break;
    case 'C':
      node.style = {
        fill: '#eee',
        stroke: '#aaa',
      };
      break;
    default:
      node.style = {
        fill: '#FDE1CE',
        stroke: '#aaa',
      };
      break;
  }
});

let sortByCombo = false;
const descriptionDiv = document.createElement('button');
descriptionDiv.innerHTML = 'Enable sortByCombo';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);

descriptionDiv.addEventListener('click', (e) => {
  sortByCombo = !sortByCombo;
  descriptionDiv.innerHTML = sortByCombo ? 'Disable sortByCombo' : 'Enable sortByCombo';
  graph.updateLayout({
    sortByCombo,
  });
});
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new G6.Graph({
  container: 'container',
  width,
  height: height - 50,
  fitView: true,
  fitViewPadding: 30,
  animate: true,
  groupByTypes: false,
  modes: {
    default: [
      'drag-combo',
      'drag-node',
      'drag-canvas',
      {
        type: 'collapse-expand-combo',
        relayout: false,
      },
    ],
  },
        defaultEdge: {
        type: 'cubic-horizontal',
        // 配置起始和目标锚点
        sourceAnchor: 1, // 源节点的底部中心锚点
        targetAnchor: 0, // 目标节点的顶部中心锚点
        style: {
          cursor: 'pointer',
        },
      },
  layout: {
    type: 'dagre',
    sortByCombo: false,
    ranksep: 10,
    nodesep: 10,
  },
  defaultNode: {
    size: [60, 30],
    type: 'rect',
    anchorPoints: [[0.5, 0], [0.5, 1]]
  },
  defaultEdge: {
        type: 'cubic-horizontal',
        // 配置起始和目标锚点
        sourceAnchor: 1, // 源节点的底部中心锚点
        targetAnchor: 0, // 目标节点的顶部中心锚点
        style: {
          cursor: 'pointer',
          lineWidth: 1, // 若不设置,会导致combo折叠后,线条边堆叠在一起
          stroke: '#C9CDD4',
          curveOffset: 20,
        },
      },
  defaultCombo: {
    type: 'rect',
    style: {
      fillOpacity: 0.1,
    },
  },
});
graph.data(data);
graph.render();

console.log('comboTrees', graph.get('comboTrees'))

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

image

@sweetheartbaby sweetheartbaby changed the title # 如下代码,combo内的节点聚合后,line没有连接到combo上面。请问怎么设置,combo内的节点聚合后,line连接到combo上方 如下代码,combo内的节点聚合后,line没有连接到combo上面。请问怎么设置,combo内的节点聚合后,line连接到combo上方 Jul 30, 2024
@Aarebecca
Copy link
Contributor

Creating and highlighting code blocks

@sweetheartbaby
Copy link
Author

Creating and highlighting code blocks 已经改格式了~ 麻烦看看呢

@Aarebecca
Copy link
Contributor

应该是收起 combo 没有触发边更新导致的,你可以先将 relayout 置为 true 临时规避,但会导致重新布局

@sweetheartbaby
Copy link
Author

sweetheartbaby commented Aug 5, 2024

应该是收起 combo 没有触发边更新导致的,你可以先将 relayout 置为 true 临时规避,但会导致重新布局

可以了! 感谢!另外,请问一下combo可以设置锚点吗,现在默认聚合后会连接到combo的左边

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

No branches or pull requests

2 participants