是否有可能在gatsby.js框架中使用d3.js？

我正在創建一個個人網站/組合，我偶然發現了健壯的gatsby.js包。是否有可能在gatsby.js框架中使用d3.js？

我也必須爲研究目的想象一個複雜的數據集，我想使用d3.js，幷包括我在蓋茨比動力站點創建的儀表板。

有可能在反應的組分使用D3 - >https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

從理論上說，蓋茨應該能夠支持D3整合，但我嘗試迄今都失敗了。

這是我曾嘗試：

完成的蓋茨比教程https://www.gatsbyjs.org/tutorial/

我使用從gatsbyjs文檔完成第四教程網站有以下補充

npm install --save d3

添加utils的/ d3.js

file contents

import d3 from "d3" 
module.exports = d3

我還將d3添加到gatsby-config.js插件中。我運行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集成和易於個人網站框架的目標阻力最小的路徑？

UPDATE 17年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

來源

2017-09-06 B.Fisch

只有Gatsby插件應該添加到gatsby-config.js中。對於像D3這樣的其他常規NPM軟件包，您只需將它們導入到模塊中即可。

來源

2017-09-07 05:50:45

嘿@Kyle，我聽到了你的軟件工程日常談話，我還以爲你墳墓無稽之談！回到手頭，我已經重讀了關於源代碼插件的Gatsby部分，並且我嘗試了很多其他的調整，但是我還沒有運氣。我的一位同事建議我使用Jekyll而不是Gatsby，因爲Jekyll的文檔更加廣泛。雖然他可能是正確的，但我喜歡你的工作，我想給它一個鏡頭。在基於路由的代碼分割部分的一篇博文中，您實際上提到了d3（https://www.gatsbyjs.org/blog/gatsby-v1/）。 –

請參閱我更新的帖子。恕我直言，在教程中增加一個部分，展示與蓋茨比一起利用外部節點的最佳做法，這將非常有幫助。 –

刪除d3-node - 它是爲node.js而不是瀏覽器。 –

這個問題與最新版本的D3 v4使用一堆節點的事實有關。JS的依賴關係，在此蓋茨比github上的問題解釋說：

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

的解決方案是，以便它加載D3的正確版本修改的WebPack配置。

我在一個gatsby項目中使用D3來創建一個強制定向圖，並且我發現我可以通過只加載d3-force庫而不是整個d3包來回避這個問題。無論如何，這是最好的選擇，因爲D3是直接操縱DOM的反應。更好的方法是使用D3的計算和渲染反應如下所示：

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

來源

2017-11-02 01:00:58

很棒的回答。過去幾個月，我花費在快速發展的JavaScript生態系統中，並且解決了這個問題。感謝您的澄清！我現在可能會回過頭來攻擊這個項目。 –

是否有可能在gatsby.js框架中使用d3.js？

回答

相關問題