私は個人的なウェブサイト/ポートフォリオを作成する過程にあり、堅牢なgatsby.jsパッケージを見つけました。d3.jsをgatsby.jsフレームワークで使用することはできますか?
また、私は研究目的で複雑なデータセットを視覚化する必要があります。私はd3.jsを使い、私がGatsby poweredサイトに作成したダッシュボードを含めたいと思います。
それはで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
ファイルの内容
import d3 from "d3"
module.exports = d3
また、gatsby-config.jsプラグインにd3を追加しました。
gatsby develop
を実行すると、次のエラーが発生し、ハングアップします。これはD3の統合と簡単に個人用サイトのフレームワークの私の目標を達成するために最も抵抗の少ない私のパス何でしょう、難治偉業である場合
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.
すべてのフィードバックは、参考になりますか?
UPDATE 09/08/17
私はHello Worldのに切り替え!チュートリアルでd3の問題をデバッグしてください。私はd3とd3-node npmパッケージを試しました。
import d3 from "d3"
をindex.jsファイルに追加すると、ブートストラップの終了後に2つの同様のエラーが発生します。
コンパイル試みそれぞれ出力における両方のエラーループ:
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ノード "
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
@Kyleねえ、私はソフトウェア工学の毎日にあなたの話を聞いて、私はあなたの墓素晴らしい話を考えました!手元に戻って、ソースプラグインのGatsbyセクションを読み返しました。私は他の多くの調整を試みましたが、まだ運がありませんでした。私の同僚の一人は、Jekyllのドキュメントがより広範であるため、GatsbyではなくJekyllを使用することを提案しています。彼は正しいかもしれないが、私はあなたの仕事が好きで、私はそれを撃ちたい。ルートベースのコード分割セクションのブログ記事の1つで、実際にd3(https://www.gatsbyjs.org/blog/gatsby-v1/)について言及しています。 –
最新の投稿をご覧ください。 IMHOでは、Gatsbyと協力して外部ノードを活用するためのベストプラクティスを示すチュートリアルのセクションを追加することが非常に役に立ちます。 –
d3-nodeを削除します。これはブラウザではなくnode.js用です。 –