Can i use d3.js with the gatsby.js card?

Question

I am creating a personal website / portfolio, and I came across a reliable gatsby.js package.

I also need to visualize a complex data set for research purposes, and I want to use d3.js and enable the dashboard that I create on my site powered by Gatsby.

You can use d3 in reaction components -> https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

Theoretically, Gatsby should support d3 integration, but my attempts have so far failed.

Here is what I tried:

Complete the Gatsby Tutorials https://www.gatsbyjs.org/tutorial/

I am using the completed 4th training site from gatsbyjs documentation with the following additions

npm install --save d3 

added utils / d3.js

file contents

 import d3 from "d3" module.exports = d3 

I also added d3 to gatsby-config.js plugins.

I run gatsby develop and get the following error, which freezes.

 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. 

Any feedback would be helpful if it were an irresistible feat, what would be my path of least resistance to achieve my goal of d3 integration and a simple personal site structure?

UPDATE 09/08/17

I switched to Hello World! to debug the d3 problem. I tried d3 and d3-node npm packages.

After adding import d3 from "d3" to the index.js file, I get two similar errors that occur after the bootstrap completes.

Both error cycles in compilation attempts and accordingly are output:

Error 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 switch import on index.js to "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

Only gatsby plugins should be added to gatsby-config.js. For other regular NPM packages, such as D3, all you have to do is import them into your modules.

Answer 2

The problem is that the latest version of D3 v4 uses the node.js dependency bundle, as gatsby github explains in this issue:

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

The solution is to change your webpack configuration so that it downloads the correct version of d3.

I use D3 in the gatsby project to create a force-oriented diagram, and I found that I can work around this problem only by loading the d3-force library instead of the entire d3 package. In any case, this is preferable because it is an anti-reaction that allows D3 to directly manipulate the DOM. The best approach is to use D3 to calculate and respond to rendering, as shown here:

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