WebStorm React d3 库 force()

Question

我在 WebStorm 中的库有一个非常奇怪的问题。我一直在试图找出为什么这不起作用，但似乎没有人遇到我遇到的确切问题，也许是因为我搜索不好，但我真的试过了。

我关注了 WebStorm 支持，从他们的角度来看，现在应该可以了！使用 npm 安装库时我没有遇到任何错误。

我也试过安装外部库：

但是，我正在尝试使用 react-d3-library，因为我正在使用 d3 绘制关系图。我可以看到在我的项目的节点模块中可用，文件夹是灰色的，其他的是橙色的？真的不知道为什么...做了一些研究并找到了一些关于 "Right click on the directory and go to 'Mark Directory as' and select 'Resource Root'" 但似乎对我不起作用的东西？

当我在浏览器中运行按 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)

代码：

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);

我真的很想得到一些帮助...我真的不明白为什么它不起作用？这可能很简单，但过去 3 天我一直在努力解决这个问题...

P.S.代码在我的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)这并没有帮助我解决实际问题。

Answer 1

据我所知，您使用的是 d3.js 的两个不同版本的类型，它们不兼容。在 v3 中有一个布局 d3.layout.force，在 v4 中已更改为 d3.forceSimulation，具有方式差异签名。因此，根据您使用的版本，您的代码将 return v4 的 TypeError 但适用于 v3。好的，我检查了你的 package.json 并且你使用的是 v4，因此这个例子不会运行。好的，我尝试将您的示例翻译成 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));

WebStorm React d3 库 force()

WebStorm React d3 library force()

intellij-idea

node.js

webstorm

d3.js

reactjs