chore: opt the layout of force-directed graph (#5484)

* chore: opt the layout of force-directed graph

* fix: resolve conversation

packages/site/examples/net/forceDirected/demo/basicFA2.js

@@ -1,39 +1,21 @@
-import { Graph, Extensions, extend } from '@antv/g6';
-
-const ExtGraph = extend(Graph, {
-  layouts: {
-    forceAtlas2: Extensions.ForceAtlas2Layout,
-  },
-});
-
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
+import { Graph } from '@antv/g6';
 
 fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
   .then((res) => res.json())
   .then((data) => {
-    const graph = new ExtGraph({
+    const graph = new Graph({
       container: 'container',
-      width,
-      height,
-      transforms: [
-    {
-      type: 'transform-v4-data',
-      activeLifecycle: ['read'],
-    },
-  ],
-      modes: {
-        default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
-      },
+      data,
       layout: {
-        type: 'forceAtlas2',
+        type: 'force-atlas2',
         preventOverlap: true,
         kr: 20,
         center: [250, 250],
       },
-      autoFit: 'view',
-      data,
+      behaviors: ['zoom-canvas', 'drag-canvas'],
+      autoResize: true,
+      zoomRange: [0.1, 5],
     });
-window.graph = graph;
+
+    graph.render();
   });

packages/site/examples/net/forceDirected/demo/basicForce.js

@@ -512,88 +512,37 @@ const data = {
 };
 
 data.nodes.forEach((node) => (node.data.size = Math.random() * 30 + 5));
-const container = document.getElementById('container');
-const width = container.scrollWidth;
-const height = container.scrollHeight || 500;
+
+const COLORS = {
+  a: '#4087FF',
+  b: '#CD74FE',
+  c: '#05B8A7',
+  d: '#FE8834',
+};
+
 const graph = new Graph({
   container: 'container',
-  width,
-  height,
+  data,
   node: {
-    lodLevels: [],
-    keyShape: {
-      r: {
-        fields: ['size'],
-        formatter: (model) => model.data.size / 2,
-      },
-    },
-    labelShape: {
-      text: {
-        fields: ['id'],
-        formatter: (node) => node.id,
-      },
-    },
-    animates: {
-      update: [
-        {
-          fields: ['opacity'],
-          shapeId: 'haloShape',
-        },
-        {
-          fields: ['lineWidth'],
-          shapeId: 'keyShape',
-        },
-      ],
+    style: {
+      type: 'circle',
+      size: (d) => d.data.size,
+      labelText: (d) => d.id,
+      ports: [],
+      fill: (d) => COLORS[d.data.cluster],
     },
   },
   layout: {
     type: 'force',
     linkDistance: 50,
-    maxSpeed: 100,
-    animated: true,
+    animation: true,
     clustering: true,
     nodeClusterBy: 'cluster',
     clusterNodeStrength: 70,
   },
-  theme: {
-    type: 'spec',
-    specification: {
-      node: {
-        dataTypeField: 'cluster',
-      },
-      edge: {
-        dataTypeField: 'cluster',
-      },
-    },
-  },
-  modes: {
-    default: ['zoom-canvas', 'drag-canvas', 'click-select'],
-  },
-  data,
-});
-
-/******** 拖拽固定节点的逻辑 *********/
-graph.on('node:dragstart', function (e) {
-  graph.stopLayout();
-});
-graph.on('node:drag', function (e) {
-  refreshDragedNodePosition(e);
-});
-graph.on('node:dragend', (e) => {
-  graph.layout();
+  behaviors: ['zoom-canvas', 'drag-canvas'],
+  zoomRange: [0.1, 5],
+  autoResize: true,
 });
-function refreshDragedNodePosition(e) {
-  const { x, y } = e.canvas;
-  graph.updateData('node', {
-    id: e.itemId,
-    data: {
-      fx: x,
-      fy: y,
-      x,
-      y,
-    },
-  });
-}
-/*********************************/
 
-window.graph = graph;
+graph.render();