WebStorm React d3 library force()

Question

I have a really strange problem with my libraries in WebStorm. I have been trying to find out why this does not work, but nobody seem to have the exact problem I am having, maybe because I search bad, but I have really tried.

I have followed the WebStorm support, and from their perspective it should work by now! I do not get any fault when installing the libraries with npm.

I also tried installing external libraries:

However, I am trying to use react-d3-library because I am doing a relational graph with d3. I can see that is available in my node modules in my project, the folder was gray and the others orange? Did not really know why... did some research and found something about "Right click on the directory and go to 'Mark Directory as' and select 'Resource Root'" but does not seem to work for me?

When I run this in my browser I get when pressing F12

Uncaught TypeError: Cannot read property 'force' of undefined
at App.componentDidMount (App.js:311)
at ReactCompositeComponent.js:265
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponent.js:264
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:206)
at ReactReconcileTransaction.perform (Transaction.js:153)
at batchedMountComponentIntoNode (ReactMount.js:126)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)

Code:

import d3 from 'react-d3-library'; 
//var d3 = require('react-d3-library);// tried this...

         const force = d3.layout.force() // (App.js:311)
        .charge(-120)
        .linkDistance(50)
        .size([width, height])
        .nodes(data.nodes)
        .links(data.links);

I would really like some help with this... I really do not get why it does not work? It is probably something easy but I have been fighting this the last 3 days...

P.S. Code is here on my github: https://github.com/Thelin90/react-d3.git and i have also checked this before Cannot read property 'force' of undefined (Simple D3 Network graph) This did not help me to solve the actual problem.

Answer 1

As far as I can see it, you are using typings of two different version of d3.js which are not compatible. In v3 there was a layout d3.layout.force in v4 this was changed to d3.forceSimulation with a way difference signature. So depending on what version you use, your code will return a TypeError with v4 but would work with v3. Ok, I checked your package.json and you are using v4, hence this example will not run. Ok I tried to translate your example to v4

 const force = d3.layout.force()
        .charge(-120)
        .linkDistance(50)
        .size([width, height])
        .nodes(data.nodes)
        .links(data.links);

const force = d3.forceSimulation(data.nodes)
    .force("link", d3.forceLink(data.links).distance(50))
    .force("charge", d3.forceManyBody().strength(-120))
    .force('center', d3.forceCenter(width / 2, height / 2));