feat(site): update some force layout

antvis · Jun 2, 2020 · 2a037fb · 2a037fb
1 parent a4b5a1e
commit 2a037fb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/packages/graphin-site/examples/layout/base/demo/Circle.jsx b/packages/graphin-site/examples/layout/base/demo/Circle.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import Graphin, { Utils } from '@antv/graphin';
 import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
@@ -8,6 +8,8 @@ const data = Utils.mock(10)
   .circle()
   .graphin();
 
-const App = () => <Graphin data={data} layout={{ name: 'circle' }} />;
+const App = () => {
+  return <Graphin data={data} layout={{ name: 'circle' }} />;
+};
 
 ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/packages/graphin-site/examples/layout/base/demo/Random.jsx b/packages/graphin-site/examples/layout/base/demo/Random.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+
+const data = Utils.mock(10)
+  .circle()
+  .graphin();
+
+const App = () => {
+  return <Graphin data={data} layout={{ name: 'random' }} />;
+};
+
+ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/packages/graphin-site/examples/layout/force/demo/Big.jsx b/packages/graphin-site/examples/layout/force/demo/Big.jsx
@@ -33,13 +33,13 @@ const legend = [
     name: 'Other',
   },
 ];
-const colors = legend.map((c) => c.color);
+const colors = legend.map(c => c.color);
 const App = () => {
   const [data, setData] = React.useState({ nodes: [], edges: [] });
   React.useEffect(() => {
-    fetch('../data/web.json')
-      .then((res) => res.json())
-      .then((res) => {
+    fetch('../../examples/data/web.json')
+      .then(res => res.json())
+      .then(res => {
         const nodes = res.nodes.map((node, index) => {
           return {
             id: String(index),
@@ -52,7 +52,7 @@ const App = () => {
             },
           };
         });
-        const edges = res.links.map((edge) => {
+        const edges = res.links.map(edge => {
           return {
             source: String(edge.source),
             target: String(edge.target),
@@ -82,6 +82,7 @@ const App = () => {
             tickInterval: 0.02,
             maxSpeed: 1000,
             damping: 0.8,
+            /** 启用 webworker 计算 */
             enableWorker: true,
             animation: true,
             defSpringLen: (_edge, source, target) => {

diff --git a/packages/graphin-site/examples/layout/force/demo/Force.jsx b/packages/graphin-site/examples/layout/force/demo/Force.jsx
@@ -8,6 +8,6 @@ const data = Utils.mock(10)
   .circle()
   .graphin();
 
-const App = () => <Graphin data={data} layout={{ name: 'force', options: { animation: true, enableWorker: true } }} />;
+const App = () => <Graphin data={data} layout={{ name: 'force', options: { preset: 'concentric' } }} />;
 
 ReactDOM.render(<App />, document.getElementById('container'));
diff --git a/packages/graphin-site/examples/layout/force/demo/Tree.jsx b/packages/graphin-site/examples/layout/force/demo/Tree.jsx
@@ -14,6 +14,7 @@ const App = () => (
     layout={{
       name: 'force',
       options: {
+        preset: { name: 'concentric' },
         defSpringLen: (_edge, source, target) => {
           const nodeSize = 30;
           const Sdegree = source.data.layout?.degree;