2017-09-06 12 views
4

私は個人的なウェブサイト/ポートフォリオを作成する過程にあり、堅牢な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の問題をデバッグしてください。私はd3d3-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 

答えて

2

gatsby-config.jsには、Gatsbyプラグインを追加する必要があります。 D3のような他の通常のNPMパッケージでは、モジュールにインポートするだけです。

+0

@Kyleねえ、私はソフトウェア工学の毎日にあなたの話を聞いて、私はあなたの墓素晴らしい話を考えました!手元に戻って、ソースプラグインのGatsbyセクションを読み返しました。私は他の多くの調整を試みましたが、まだ運がありませんでした。私の同僚の一人は、Jekyllのドキュメントがより広範であるため、GatsbyではなくJekyllを使用することを提案しています。彼は正しいかもしれないが、私はあなたの仕事が好きで、私はそれを撃ちたい。ルートベースのコード分割セクションのブログ記事の1つで、実際にd3(https://www.gatsbyjs.org/blog/gatsby-v1/)について言及しています。 –

+0

最新の投稿をご覧ください。 IMHOでは、Gatsbyと協力して外部ノードを活用するためのベストプラクティスを示すチュートリアルのセクションを追加することが非常に役に立ちます。 –

+1

d3-nodeを削除します。これはブラウザではなくnode.js用です。 –

2

問題は、D3 v4の最新バージョンではノードの束が使用されていることと関係がある。JSの依存関係、このギャツビーgithubの問題で説明したように:

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

解決策は、D3の正しいバージョンをロードするように、あなたのWebPACKの設定を変更することです。

gatsbyプロジェクトで強制的なグラフを作成するためにD3を使用していますが、d3パッケージ全体ではなくd3-forceライブラリを読み込むだけでこの問題を回避できます。これは、D3がDOMを直接操作できるようにするために反反応するため、とにかく好ましい方法です。より良いアプローチは、計算にD3を使用して、ここに示すように、レンダリングのために反応させることである。

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

+0

素晴らしい答え。私はここ数カ月を急速に進化するJavaScriptエコシステムに浸してきましたが、あなたはその問題を釘付けにしました。解明してくれてありがとう!私はこのプロジェクトに戻ってハックするかもしれない。 –

関連する問題