react-d3-force-layout v1.0.1

react-d3-force-layout

Using d3 with react is hard enough. This package will help users around the globe to use d3 force layout with react.

to install npm install

react-d3-force-layout

to use

import ForceLayout from 'react-d3-force-layout';

FORMAT OF DATA TO FEED IN

const graphData = {
    nodes: [
        {id: 'GrandFather',showChildren: true,show: true,group: 1},
        {id: 'Father1',showChildren: true,show: true,group: 2},
        {id: 'Father2',showChildren: true,show: true,group: 2},
        {id: 'Father3',showChildren: true,show: true,group: 2},
        {id: 'Father4',showChildren: true,show: true,group: 2},
        {id: 'Father5',showChildren: true,show: true,group: 2},
        {id: 'Father6',showChildren: true,show: true,group: 2},
        {id: 'Father7',showChildren: true,show: true,group: 2},
        {id: 'Father8',showChildren: true,show: true,group: 2},
        {id: 'Son1',showChildren: true,show: true,group: 3},
        {id: 'Son2',showChildren: true,show: true,group: 3},
        {id: 'Son3',showChildren: true,show: true,group: 3},
        {id: 'Son4',showChildren: true,show: true,group: 3},
        {id: 'Son5',showChildren: true,show: true,group: 3},
        {id: 'Son6',showChildren: true,show: true,group: 3},
        {id: 'Son7',showChildren: true,show: true,group: 3},
        {id: 'Son8',showChildren: true,show: true,group: 3},
        {id: 'Son9',showChildren: true,show: true,group: 3},
        {id: 'Son10',showChildren: true,show: true,group: 3},
        {id: 'Son11',showChildren: true,show: true,group: 3},
        {id: 'Son12',showChildren: true,show: true,group: 3},
        {id: 'Son13',showChildren: true,show: true,group: 3},
        {id: 'Son14',showChildren: true,show: true,group: 3},
        {id: 'Son15',showChildren: true,show: true,group: 3},
        {id: 'Son16',showChildren: true,show: true,group: 3},
    ],
    links: [
        {source: 'GrandFather', show: true, target: 'Father1', value: 5},
        {source: 'GrandFather', show: true, target: 'Father2', value: 5},
        {source: 'GrandFather', show: true, target: 'Father3', value: 5},
        {source: 'GrandFather', show: true, target: 'Father4', value: 5},
        {source: 'GrandFather', show: true, target: 'Father5', value: 5},
        {source: 'GrandFather', show: true, target: 'Father6', value: 5},
        {source: 'GrandFather', show: true, target: 'Father7', value: 5},
        {source: 'GrandFather', show: true, target: 'Father8', value: 5},
        {source: 'Father1', show: true, target: 'Son1', value: 12},
        {source: 'Father1', show: true, target: 'Son3', value: 12},
        {source: 'Father2', show: true, target: 'Son2', value: 9},
        {source: 'Father2', show: true, target: 'Son4', value: 3},
        {source: 'Father3', show: true, target: 'Son5', value: 3},
        {source: 'Father3', show: true, target: 'Son7', value: 3},
        {source: 'Father4', show: true, target: 'Son6', value: 3},
        {source: 'Father4', show: true, target: 'Son8', value: 3},
        {source: 'Father5', show: true, target: 'Son9', value: 3},
        {source: 'Father5', show: true, target: 'Son10', value: 3},
        {source: 'Father6', show: true, target: 'Son11', value: 3},
        {source: 'Father6', show: true, target: 'Son12', value: 3},
        {source: 'Father7', show: true, target: 'Son13', value: 3},
        {source: 'Father7', show: true, target: 'Son14', value: 3},
        {source: 'Father8', show: true, target: 'Son15', value: 3},
        {source: 'Father8', show: true, target: 'Son16', value: 3},
    ],
};

USING INSIDE RENDER: ForceLayout takes the width and height of its immediate parent div

<div style={{boxShadow: '2px 2px 1px 2px', height: '90%', width: '100%', position: 'absolute'}}>
    <ForceLayout
        nodeLinkObject={JSON.parse(JSON.stringify(graphData))} // primary prop
        colorFunction={node => ( {1: 'red', 2: 'green', 3: 'purple'}[node.group] )}
        multiOptionsClick={{
            keyToLookFor: 'group', // based on what keys the functions are to be given
            2: { // group with number 2 has a single function called create and is collapsible
              Create: {
                func: node => {
                  console.log('create clicked on node', node)
                },
                color: '#C64944',
              },
            },
            3: { // group with number 3 has 2 functions and is not collapsible
              Edit: {
                func: node => {
                  console.log('edit Clicked on node', node);
                },
                color: '#E76C32',
              },
              Delete: {
                func: node => {
                  console.log('delete clicked on node', node);
                },
                color: '#8571AB',
              },
            },
            collapsibles: [1, 2], // nodes with keyToLookFor value these will include auto collapse option
        }}
        // collapseOnClick // if multiOptionClick not set and this prop enabled , all nodes will be collapsible
        nodeClicked={() => {}} // works when multiOptionClick and collapseOnClick not set
        showLabelOnHover={{ // if set a tooltip shows if not the nodes are labled by default by name or id
            id: 'ID-modified',
            group: 'Type',
        }}
        legend={{ GrandFather: 'red', Father: 'green', Son: 'purple'}}
        connectionStrength={0.09} // the more the value the lesser closely the nodes are packed
        circleIncreseFactor={15} // increase per increase in group
        circleRadius={5} // the base circle radius
        treeView={false} // put this true to see tree view
        // treeView
        fillType="White" // "White" (yes big W) or according to the color function
    />   
</div>