antvis / G6

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

new G6.Layout.comboCombined giving different coordinate results than normal comboCombined initialization #4797

Closed bsansone closed 3 months ago

bsansone commented 1 year ago

Describe the bug

I am using the comboCombined layout type to render my graph in the browser which works fine, but for some graphs that are large we want to calculate the layout (get the x, y coordinates) on the server. I assumed this can be done by doing:

  const comboCombinedLayout = new G6.Layout.comboCombined();

  comboCombinedLayout.init({
      nodes,
      edges,
      combos,
  });
  comboCombinedLayout.execute();

  const results = {
      nodes: comboCombinedLayout.nodes,
      edges: comboCombinedLayout.edges,
      combos: comboCombinedLayout.combos,
  };
  // these x, y coordinates are not the same
  console.log(results);

The results however are different than what I would normally get with:

  new G6.Graph({
      ...options,
      layout: {
          type: "comboCombined",
      },
  });

Your Example Website or App

https://codesandbox.io/s/infallible-ptolemy-hz8jq6?file=/src/index.js

Steps to Reproduce the Bug or Issue

  1. Go to https://codesandbox.io/s/infallible-ptolemy-hz8jq6?file=/src/index.js
  2. Notice the layoutCfg is set to use the default comboCombined layout type and the graph renders correctly.

    const layoutCfg = {
    // For @antv/g6
    type: "comboCombined"
    
    // For @antv/layout
    // we already have the x, y gathered from the layout method
    // type: null
    };
  3. Comment out type: "comboCombined" and uncomment // type: null
  4. This will cause the layout to be computed via const comboCombinedLayout = new G6.Layout.comboCombined({, leaving the layout type = null will tell the graph we have predefined x, y coordinates to use.
  5. Notice after saving that the graph does not look the same as the original and the x, y coordinates are different

Expected behavior

I expected using the built-in new G6.Layout.comboCombined method to act the same as the layout: { type: "comboCombined" } config so that the coordinates can be computed on the server.

Screenshots or Videos

Expected Results:

image

Actual Results:

image

Platform

Additional context

No response

Yanyan-Wang commented 1 year ago

Since comboCombined's outerLayout is a force layout, it is an asynchronous layout. So you have to refresh the graph's nodes positions in the layout end callback function. e.g.

const comboCombinedLayout = new G6.Layout.comboCombined({ width: 800, height: 500, onLayoutEnd: () => { graph.refreshPositions() // here } });

github-actions[bot] commented 3 months ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。