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

Question

我正在创建一个个人网站/投资组合，我偶然发现了强大的 gatsby.js 包。

出于研究目的，我还必须可视化一个复杂的数据集，我想使用 d3.js，并将我在 Gatsby 支持的网站中创建的仪表板包括在内。

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

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

这是我尝试过的：

完成盖茨比教程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 集成和简单的个人站点框架目标的阻力最小的路径是什么？

2017 年 9 月 8 日更新

我切换到 Hello World！调试 d3 问题的教程。我试过d3 和d3-node npm 包。

在我的 index.js 文件中添加 import d3 from "d3" 后，我得到两个在引导完成后发生的类似错误。

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

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 节点错误 将 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。对于像 D3 这样的其他常规 NPM 包，您只需将它们导入到您的模块中即可。