Giter Club home page Giter Club logo

Comments (3)

yinjialu avatar yinjialu commented on May 10, 2024

同样的代码在官网 demo 中绘制出来表现不一致,节点2和节点3在一个水平线上,用直线相连,复合预期
image
示例地址:https://antv-g6.gitee.io/zh/examples/net/dagreFlow#dagreCombo
代码如下:

import G6 from '@antv/g6';

const init = () => {
  const data = {
  nodes: [
    {
        id: '0',
        label: '0',
      },
    {
      id: '1',
      label: '1',
      child: {
        nodes: [
          { id: '2', name: '2' },
          { id: '3', name: '3' },
        ]
      }
    },
    {
      id: '2',
      label: '2',
      comboId: 'A'
    },
    {
      id: '3',
      label: '3',
      comboId: 'A'
    }
  ],
  edges: [
    {
        source: '0',
        target: '1',
      },
    {
      source: '1',
      target: 'A',
    },
    {
      source: '2',
      target: '3',
    }
  ],
  combos: [
    {
      id: 'A',
      label: 'combo A',
    }
  ],
};

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,
  fitCenter: true,
  // animate: true,
  groupByTypes: false,
  modes: {
    default: [
      'zoom-canvas',
      'drag-combo',
      // 'drag-node',
      'drag-canvas',
      {
        type: 'collapse-expand-combo',
        relayout: false,
      },
    ],
  },
  layout: {
    type: 'dagre',
    rankdir: 'LR',
    sortByCombo: true,
    ranksep: 40,
    nodesep: 40,
  },
  defaultNode: {
    size: [40, 30],
    type: 'rect',
    anchorPoints: [
      [0, 0.5],
      [0.5, 0],
      [1, 0.5],
      [0.5, 1]
    ]
  },
  defaultEdge: {
    type: 'cubic-horizontal',
    style: {
      stroke: '#666666',
      endArrow: {
        path: G6.Arrow.triangle(8, 10, 10), // 内置箭头,参数为箭头宽度、长度、偏移量 d(默认为 0)
        d: 15, // 偏移量
        fill: '#666666',
        stroke: '#666666',
      },
    },
  },
  defaultCombo: {
    type: 'rect',
    style: {
      lineDash: [5, 5],
      fill: '',
      stroke: '#666666',
    },
  },
});
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);
  };
}

// init()

setTimeout(() => {
  init()
}, 100)

from g6.

Yanyan-Wang avatar Yanyan-Wang commented on May 10, 2024

可以试试这种布局方法:https://codesandbox.io/s/hopeful-lumiere-yjgx2v?file=/index.js

from g6.

yinjialu avatar yinjialu commented on May 10, 2024

棒,这个不错 @Yanyan-Wang

我尝试了下增加节点,在有嵌套 Combo 场景,节点 3 连接 Combo B 的表现不太符合预期
预期:Combo 作为虚拟节点,参与层次布局,默认水平居中对齐,Combo 内也使用层次布局,默认居中对齐
https://codesandbox.io/s/dazzling-water-84h43z?file=/index.js
image

from g6.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.