6

をおよびと統合するという問題に直面していますが、 require のshimを使用して簡単な解決策を見つけました。シムを使用すると、変数をエクスポートでき、依存関係も定義できます。

d3: { exports: 'd3' },
nvd3: {
  exports: 'nv',
  deps: ['d3']
},

このように、d3 やその他のパッケージを bower でインストールし、require でインクルードするだけで、非常に迅速かつクリーンです。

それにもかかわらず、私は次の問題に直面しました。おそらく、グローバル d3 変数とローカル変数 (必要なモジュールに挿入されたもの) の間にいくつかの衝突があります。これは、遷移と選択に関連する d3 / require / nvd3 統合の問題です。問題を完全には理解していませんが、すでにいくつかの考慮事項を作成できます。

  • jquery には、require と同じ問題があり、それを修正するための noconflict メソッドが提供されています。
  • 多くのライブラリにはこの動作があり、グローバル シンボルをエクスポートしますが、私の知る限り、一般的な問題に対する requirejs からの修正はありません。
  • d3d3ソースへのすべてのグローバル参照を別の名前に変更すると、問題は修正されます。挿入されたモジュールにはまだありd3ますが、もう競合していません

私が見る限り、すべての d3 機能はこのように動作しますが、nvd3 チャートの 1 つは、おそらくセレクションまたはディスパッチャーが上書きされているために遷移が壊れています。エラーを正確に特定するには、d3 の内部構造を深く理解する必要がありますが、おそらくグローバル シンボルを単純かつ正しく処理することで、同様の問題の集計全体をクリアできます。

おそらく、requirejs が shim の依存関係を処理する方法が原因で、グローバル d3 シンボルが nvd3 に公開されます。とにかく、同じシンボルは必要なモジュールでは使用できず、注入された場合 (モジュールの依存関係に含まれる) 何らかの方法で上書きされます。

モジュールで d3 をラップし、ローカル d3 変数を適切に返すことも試みましたが、問題はまだ解決していないようです。

また、d3 とモジュールに関する以前の投稿をホストしているこの d3 グループ ディスカッションで、これについて助けを求めました。

ここにテスト ケースを追加しました: https://github.com/danse/requirenvd3

4

3 に答える 3

1

問題は RequireJS 構成ではなく、d3.v2 ではなく d3.v3 を使用しているという事実にあるようです。テスト ケースで d3 をダウングレードしたところ、遷移は正常に機能しました。（ポップアップはまだすべて横にずれていますが、そうあるべきではないと思いますが、それはあなたが現在心配していることではないようです。）nvd3にはd3.v3にいくつかの問題があることは私の理解です. 、これはおそらく 1 つです。また、ddotsenko の jsFiddle で d3 のバージョンに注意してください。これは、独自の d3.v3 ライブラリを使用して実装したときに彼のソリューションが機能しなかった理由を説明できます。

于 2013-03-18T10:47:41.367 に答える
0

まず、バイパスshimすることができます。プレーンJSの場合は何も返す必要はありません。グローバルを使用するだけです。

RequireJSを介してCDNからAngularをロードすることは注入されません

次に、shimスクリプトの依存関係を宣言するのに半ば便利ですが、明示的に行うこともできます。

require(['path/to/d3.min'], function(){
    // nesting to insure d3 loads before nvd3
    require(
        [
            'path/to/mylogic' // <- AMD module
            ,'path/to/nvd3.min' // <- actually a plain JS file
        ]
        , function(mylogic /*, we ignore what nvd3 returns */){
            window.nv // is available for you
        }
    )
})
于 2013-03-08T10:40:50.980 に答える
0

このmain.jsファイル(「depend」requirejs プラグインを使用) で行っていることと、グローバル変数にエクスポートする必要がある他のファイルで行っていることを見てください。

    define(['d3'], 関数 (d3) {
        //ここにコード...
    });

depend プラグインは非常に優れており、depend!plugin[dependancy1,dependancy2] を介して階層的な読み込みをセットアップできます (「依存性 1」と「依存性 2」が読み込まれた後に「プラグイン」が読み込まれます。

于 2013-03-09T03:21:25.273 に答える