react force graph 선 길이, 노드 색깔 등

<script type="text/jsx">

      const { useRef, useEffect } = React;

      fetch('data.json').then(res => res.json()).then(data => {

        const FocusGraph = () => {

          const fgRef = useRef();

          useRef(() => {

            const fg = fgRef.current;

          });

         

          useEffect(() => {

            // fgRef.current.d3Force('collision', d3.forceCollide(node => 1));  // 클 수록 안겹침

            fgRef.current.d3Force("link").distance(links => (150/links.value)); // 선 길이(가까울수록 여러번 같이 수행함)

          }, []);

         

          const GROUPS = 12;

          return <ForceGraph3D

            ref={fgRef}

            graphData={data}

            nodeLabel={node => `${node.name}(${node.id}) : ${node.birth} : 총 사업비 ${node.val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}원 ${node.tag}`}

            nodeAutoColorBy="bsns"

            nodeVal = {node => (node.val/1000000000)}

            linkWidth = {link => (link.value*2)}

            linkDirectionalParticles={1}

            linkResolution = {12}

            nodeResolution  = {16}

            onNodeDragEnd={node => {

              node.fx = node.x;

              node.fy = node.y;

              node.fz = node.z;

            }}

            linkAutoColorBy={link => (link.value)}            

            // linkColor={link => link.value ===1 ? 'blue':'red'}

            // autoPauseRedraw={false}

            // warmupTicks={0} // Number of layout engine cycles to dry-run at ignition before starting to render.

            cooldownTime={300000} // How long (ms) to render for before stopping and freezing the layout engine.

            // cooldownTicks={99999} // How many build-in frames to render before stopping and freezing the layout engine.

          />;

        };

        ReactDOM.render(

          <FocusGraph />,

          document.getElementById('graph')

        );

      });

    </script>