figured out how to use d3Force

1 files changed, 27 insertions, 13 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index d41cfc7..592e00b 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { useState, useEffect, useRef } from "react"
 import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
 import { observer } from "mobx-react-lite"
 import { color, typography } from "../../theme"
@@ -9,6 +10,8 @@ import data from "../../data/miserables.json"
 import genRandomTree from "../../data/randomdata";
 
 import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph';
+import { GraphData, ForceGraphMethods } from "react-force-graph-2d";
+import * as d3 from "d3-force";
 import  Slider  from '@react-native-community/slider';
 
 const CONTAINER: ViewStyle = {
@@ -35,36 +38,47 @@ export const Graph = observer(function Graph(props: GraphProps) {
   const { style } = props
   const styles = flatten([CONTAINER, style])
 
-  //  const fgRef= React.useRef();
+    const fgRef= useRef();
 
 
-    const GROUPS=12;
+    const GROUPS: number =12;
     const gData = genRandomTree();
 
-    const [visco, setVisco] = React.useState(0.4);
+    const [charge, setCharge] = useState(-30);
+    const [link, setLink] = useState(-30);
 
- // React.useEffect(()=> {
- //     const fg = fgRef.current;
+    useEffect(()=> {
+      const fg = fgRef.current;
 
- //     fg.d3Force('center', visco);
- // });
+        fg.d3Force('charge').strength(charge);
+        fg.d3Force('center').strength(0.05);
+        fg.d3Force('link').strength(0.1);
+        fg.d3Force('link').iterations(4);
+        fg.d3Force('collide', d3.forceCollide().radius(20));
+  });
 
     return (
     <View>
     <Slider style={{position: "absolute", zIndex: 100, width: "20%", height: 40}}
-        minimumValue={0}
-        maximumValue={1}
-        onValueChange={(value)=>{setVisco(value)}}
-        value={visco}
+        minimumValue={-100}
+        maximumValue={10}
+        onValueChange={(value)=>{setCharge(value)}}
+        value={charge}
+    />
+    <Slider style={{position: "absolute", top: 50, zIndex: 100, width: "20%", height: 40}}
+        minimumValue={-100}
+        maximumValue={0}
+        onValueChange={(value)=>{setCharge(value)}}
+        value={charge}
     />
     <ForceGraph2D
-   //   ref={fgRef}
+      ref={fgRef}
       graphData={gData}
       nodeAutoColorBy={d => d.id%GROUPS}
       linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS}
       linkColor={"#ffffff"}
       linkWidth={2}
-      d3VelocityDecay={visco}
+      //d3VelocityDecay={visco}
       />
     </View>
   )