antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

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

sweetheartbaby posted onGitHub

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


posted by Aarebecca 9 months ago

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

posted by sweetheartbaby 9 months ago

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

posted by Aarebecca 9 months ago

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

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

posted by sweetheartbaby 9 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests