can not see the graph with nodes in the center of the container

[chairy11]

Hi，so so glad to found your react-d3-graph project which is rapidly updating. Do you know Ogma? It's a great network framework, with features I need, but I can't afford it.

Thank you for making this open-source project.

But I meet some problem:

1. I try to draw a graph with 1000 nodes, but the result seems strange: The graph didn't place center and not like a force network. The nodes are in a line.

Is there something wrong? I install react-d3-graph by command

npm install react-d3-graph  --save
npm install --save d3-drag d3-force d3-zoom

My config is :

    const myConfig = {
      width: "100%",
      height: 700,
      node: {
        color: 'lightgreen',
        size: 200,
        highlightStrokeColor: 'blue',
        fontColor: "black",
        fontSize: 12,
        fontWeight: "normal",
        highlightColor: "red",
        highlightFontSize: 12,
        highlightFontWeight: "bold",
        highlightStrokeWidth: 1.5,
        labelProperty: "label",
        renderLabel: true,
        mouseCursor: "pointer",
        opacity: 1,
        strokeColor: "none",
        strokeWidth: 1.5,
        symbolType: "circle",
      },
      link: {
        highlightColor: 'lightblue',
        color: "#d3d3d3",
        opacity: 1,
        semanticStrokeWidth: false,
        strokeWidth: 4,
      },
      nodeHighlightBehavior: true,
      linkHighlightBehavior: true,
      highlightOpacity: 0.2,
      focusZoom: 1,
      focusAnimationDuration: 0.75,
      // focusedNodeId: 'nodeIdToTriggerZoomAnimation',
      maxZoom: 12,
      minZoom: 0.05,
      collapsible: true,
      directed: true,         // 显示箭头
      automaticRearrangeAfterDropNode: false,
      staticGraph: false,    // 可拖拽节点
      d3: {
        alphaTarget: 0.05,
        gravity: -100,
        linkLength: 100,
        linkStrength: 1,
      },
    };

If I use the Echarts, can get the result like this:

And, I need some more features:

1. by changing a config, dynamic change the color and the size of nodes. for example,

   const data = {
     nodes: [{
         id: 1,
         colorAttr: "xxx"
         sizeAttr: "xxxxx"
   }, ...]
   }

in Echarts , it's something like this: setting visualMap, node.prop1 make the node color, node.prop2 make the node size.

config like this:

const myConfig = { 
     node: {
          labelProperty: "name",
          colorProperty: "colorAttr",      //  like "labelProperty",  (string | Function), used in runtime to fetch color
          sizeProperty: "sizeAttr",    //  like "labelProperty",  (string | Function), used in runtime to fetch size
           }
}

2. show or hide a node by changing the config.
3. show tooltip

Would that be support?

By the way, can it support more than 4000 nodes?

[chairy11]

P.S. I found there were some warning with installing

➜  fkm-ui git:(page-home) ✗ npm install react-d3-graph 
npm WARN ajv-errors@1.0.0 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-dva-hmr@0.4.1 requires a peer of redbox-react@1.x but none is installed. You must install peer dependencies yourself.
npm WARN echarts-for-react@2.0.15-beta.0 requires a peer of echarts@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-d3-graph@2.0.0-rc2 requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-fittext@1.0.0 requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-fittext@1.0.0 requires a peer of react-dom@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN rollup-plugin-babel@4.0.3 requires a peer of rollup@>=0.60.0 <1 but none is installed. You must install peer dependencies yourself.
npm WARN rollup-plugin-commonjs@9.2.0 requires a peer of rollup@>=0.56.0 but none is installed. You must install peer dependencies yourself.

so I run

  npm install ajv redbox-react echarts d3 rollup module react react-dom --save

but the graph still behavior as a line but not a force network:

If I change the data:

const myConfig = {
      width: "100%",
      height: 700,
      node: {
        color: 'lightgreen',
        size: 200,
        highlightStrokeColor: 'blue',
        fontColor: "black",
        fontSize: 12,
        fontWeight: "normal",
        highlightColor: "red",
        highlightFontSize: 12,
        highlightFontWeight: "bold",
        highlightStrokeWidth: 1.5,
        labelProperty: "label",
        renderLabel: true,
        mouseCursor: "pointer",
        opacity: 1,
        strokeColor: "none",
        strokeWidth: 1.5,
        symbolType: "circle",
      },
      link: {
        highlightColor: 'lightblue',
        color: "#d3d3d3",
        opacity: 1,
        semanticStrokeWidth: false,
        strokeWidth: 4,
      },
      nodeHighlightBehavior: true,
      linkHighlightBehavior: true,
      highlightOpacity: 0.2,
      focusZoom: 1,
      focusAnimationDuration: 0.75,
      // focusedNodeId: 'nodeIdToTriggerZoomAnimation',
      maxZoom: 12,
      minZoom: 0.05,
      collapsible: true,
      directed: true,         // 显示箭头
      automaticRearrangeAfterDropNode: false,
      staticGraph: false,    // 可拖拽节点
      d3: {
        alphaTarget: 0.05,
        gravity: -100,
        linkLength: 100,
        linkStrength: 1,
      },
    };

const newData = {
      nodes: [{ id: 'Harry' }, { id: 'Sally' }, { id: 'Alice' }],
      links: [{ source: 'Harry', target: 'Sally' }, { source: 'Harry', target: 'Alice' }]
    };

<Graph
                id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
                data={newData}
                config={myConfig}
              />

It will look like as following at first: I can drag this three nodes by hand:

But I can't drag graph with my own data:

[chairy11]

Now I read the Sandbox source code , and change the config staticGraph: true:

decorateGraphNodesWithInitialPositioning = nodes => (nodes.map(n =>
      Object.assign({}, n, {
        x: n.x || Math.floor(Math.random() * 500),
        y: n.y || Math.floor(Math.random() * 500)
      })
    ));

const newData = {
      nodes: this.decorateGraphNodesWithInitialPositioning(nodes),
      links: edges,
    };

<Graph
        id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
        data={newData}
        config={myConfig}
/>

and Got this:

even I use the official data maven, still get mess:

But it's not what I want, I need the force graph, which you can see the relationship by network . something like this (Les Miserables, plus, it can show hide nodes by category)

or this (plus, it can fold and unfold gracefully)

[chairy11]

Did you see this force-collapsible example? It's interesting.

[danielcaldas]

From react-d3-graph docs:

staticGraph (boolean = false) when setting this value to true the graph will be completely static, thus all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be rendered with the initial provided x and y coordinates (links positions will be automatically set from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.

[chairy11]

@danielcaldas Thank you for your answer.

But even though I set the staticGraph: false, the graph still not show as a force. I don't know why.

my code:

decorateGraphNodesWithInitialPositioning = nodes => (nodes.map(n =>
      Object.assign({}, n, {
        x: n.x || Math.floor(Math.random() * 500),
        y: n.y || Math.floor(Math.random() * 500)
      })
    ));

const nodes = [
      {
        id: 'Marvel',
        svg: 'http://marvel-force-chart.surge.sh/marvel_force_chart_img/marvel.png',
        size: 500,
        fontSize: 18
      },
      ...
    ];

    const newData = {
      nodes: this.decorateGraphNodesWithInitialPositioning(nodes),
      links: [
        {
          source: 'Marvel',
          target: 'Heroes'
        },
       ...
      ],
    };

const myConfig = {
      automaticRearrangeAfterDropNode: false,
      collapsible: true,
      directed: false,
      height: 700,
      width: '100%',
      highlightDegree: 1,
      highlightOpacity: 1,
      linkHighlightBehavior: false,
      maxZoom: 8,
      minZoom: 0.1,
      focusZoom: 1,
      focusAnimationDuration: 0.75,
      nodeHighlightBehavior: false,
      panAndZoom: false,
      staticGraph: false,
      d3: {
        alphaTarget: 0.05,
        gravity: -100,
        linkLength: 100,
        linkStrength: 1
      },
      node: {
        color: '#d3d3d3',
        fontColor: 'black',
        fontSize: 8,
        fontWeight: 'normal',
        highlightColor: 'SAME',
        highlightFontSize: 8,
        highlightFontWeight: 'normal',
        highlightStrokeColor: 'SAME',
        highlightStrokeWidth: 1.5,
        labelProperty: 'id',
        mouseCursor: 'pointer',
        opacity: 1,
        renderLabel: true,
        size: 200,
        strokeColor: 'none',
        strokeWidth: 1.5,
        svg: '',
        symbolType: 'circle',
        viewGenerator: null
      },
      link: {
        color: '#d3d3d3',
        highlightColor: '#d3d3d3',
        mouseCursor: 'pointer',
        opacity: 1,
        semanticStrokeWidth: false,
        strokeWidth: 1.5,
        type: 'STRAIGHT'
      }
    };

   return (
      <Graph
        id="graph-id" 
        ref={e => { this.graph = e; }}
        data={newData}
        config={myConfig}
      />

my d3 version is 5.7.0, react-d3-graph version is 2.0.0-rc2

 $ npm list d3
ant-design-pro@2.1.0 /fkm-ui
└── d3@5.7.0 

$ npm list react-d3-graph
ant-design-pro@2.1.0 /fkm-ui
└── react-d3-graph@2.0.0-rc2 

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.