是否可以将d3.js与gatsby.js框架一起使用？

Question

我正在创建一个个人网站/组合,我偶然发现了强大的gatsby.js软件包.

我还需要将一个复杂的数据集可视化用于研究目的,我想使用d3.js,并包括我在Gatsby供电网站中创建的仪表板.

可以在反应组件中使用d3 - > https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

从理论上讲,Gatsby应该能够支持d3集成,但到目前为止我的尝试都失败了.

这是我尝试过的:

完成Gatsby教程https://www.gatsbyjs.org/tutorial/

我正在使用gatsbyjs文档中已完成的第4个教程网站,并添加了以下内容

npm install --save d3

添加了utils/d3.js

文件内容

import d3 from "d3"
module.exports = d3

我还在gatsby-config.js插件中添加了d3.

我运行gatsby develop,并收到以下错误,挂起.

success delete html files from previous builds — 0.005 s
success open and validate gatsby-config.js — 0.003 s
(node:8725) UnhandledPromiseRejectionWarning: Unhandled promise rejection 
(rejection id: 2): Error: Unable to find plugin "d3"
(node:8725) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.
 In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

任何反馈都会有所帮助,如果这是一个难以解决的壮举,那么我对实现d3集​​成目标和简单的个人网站框架的阻力最小的是什么呢？

更新09/08/17

我切换到了Hello World!调试d3问题的教程.我试过d3和d3节点的 npm包.

添加import d3 from "d3"到我的index.js文件后,我得到两个在bootstrap完成后发生的类似错误.

这两个错误在编译尝试中循环并分别输出:

d3错误

ERROR  Failed to compile with 2 errors  
These dependencies were not found:

* child_process in ./~/xmlhttprequest/lib/XMLHttpRequest.js

* fs in ./~/xmlhttprequest/lib/XMLHttpRequest.js

To install them, you can run: npm install --save child_process fs

d3-node error 将index.js上的导入切换为"d3-node"

ERROR  Failed to compile with 13 errors

These dependencies were not found:

* fs in ./~/jsdom/lib/jsdom.js, ./~/jsdom/lib/jsdom/browser/resource-loader.js and 3 others
* net in ./~/tough-cookie/lib/cookie.js, ./~/forever-agent/index.js and 1 other
* child_process in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js
* tls in ./~/forever-agent/index.js, ./~/tunnel-agent/index.js

To install them, you can run: npm install --save fs net child_process tls

These relative modules were not found:

* ../file-api/FileReader-impl.js in ./~/jsdom/lib/jsdom/living/generated/FileReader.js
* ../events/MutationEvent-impl.js in ./~/jsdom/lib/jsdom/living/generated/MutationEvent.js

Answer 1

问题与以下事实有关：最新的D3 v4版本使用了一堆node.js依赖项，如以下gatsby github问题中所述：

https://github.com/gatsbyjs/gatsby/issues/2107

解决方案是修改您的webpack配置，以便加载正确版本的d3。

我在gatsby项目中使用D3来创建力导向图，我发现我可以通过仅加载d3-force库而不是整个d3包来回避此问题。无论如何，这都是可取的，因为让D3直接操作DOM是反反应的。更好的方法是使用D3进行计算并对渲染做出反应，如下所示：

https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721

Answer 2

只应将 Gatsby 插件添加到 gatsby-config.js。对于其他常规 NPM 包，如 D3，您需要做的就是将它们导入到您的模块中。