RequireJSを使用してd3依存スクリプトをロードする方法は？

Question

RequireJSを使用してd3-pathをロードしようとしています。

!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports):"function"==typeof define&&define.amd?define(["exports"],s):s(t.d3=t.d3||{})} 

マイindex.htmlが

<script> 
    require.config({ 
     paths: { 
      "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min", 
      "d3-path": "https://d3js.org/d3-path.v1.min", 
      "underscore": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min", 
      "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" 
     } 
    }); 
</script> 

そして、私は私のJSファイルを次のようになります。私は最初の行でこれを参照するので、それはAMDに準拠しているように縮小さ d3-pathソースコードを見ると、それが見えます d3.path()をロードしようとすると、私は d3_path.path()を行うことによって d3-pathを使用することができますが、私はめざし

require([ 
    "d3", 
    "d3-path", 
    "underscore" 
], 
function(
    d3, 
    d3_path, 
    _ 
) { 
    // d3, d3_path, and _ are defined 
    // but d3.path() isn't defined 
}); 

のように見えます理想的にはuldはd3.path()のようにします。しかし、d3とd3-pathをd3に設定した場合、は、d3に上書きされ、メインのd3機能は失われます。

私は最良の方法を使用しているかどうかわからないので、RequireJSのベストプラクティスも公開されています。ありがとう！

Answer 1

予備ノート：d3 V3をV4モジュールでロードしようとしていますが、これはうまく機能しません。

ご質問：これは、マイクロモジュールを使用する際の作業方法です。孤立した機能を読み込んで結合します。

あなただけがドキュメントに言ったようにvanilla environments使用する場合d3グローバル取得：あなたは全体のD3 v4のライブラリをロードする場合は、あなたが得ること

require.config({ 
    paths: { 
     "d3": "https://d3js.org/d3.v4.min" 
    } 
}); 

require(['d3'], function(myd3) { 
    console.log(window.d3); // undefined 
    console.log(myd3); // d3 object 
}); 

注意してみてくださいd3.path：

require(['d3'], function(myd3) { 
    console.log(myd3.path); // function 
}); 

最後に、複数のマイクロモジュールを使用する場合は、マップされた構成を使用できます。

require.config({ 
    paths: { 
     d3src: 'https://d3js.org' 
    }, 
    map: { 
     '*': { 
      'd3': 'd3src/d3.v4.min', 
      'd3-selection': 'd3src/d3-selection.v1.min', 
      'd3-path': 'd3src/d3-path.v1.min', 
     } 
    } 
}); 


// if you want to load the selection and the path modules 
require(['d3-selection', 'd3-path'], function(selection, path) { 
    // ... 
}); 

// if you want to load d3 
require(['d3'], function(d3) { 
    // ... 
}); 

Answer 2

d3マイクロライブラリの使用に関するnikoshrの回答に加えて、d3モジュールの名前をハイフンで指定する必要があります。 d3-selectionがあります。一部のd3ライブラリは他のライブラリに依存しており、requireがこの構文で使用されています。

さらに、独自のd3オブジェクトをモジュールに作成することができるため、コードを変更する必要はなく、d3.path()を使用することができます。

require(['d3-selection', 'd3-path'], function(d3Selection, d3Path) { 
    let d3 = Object.assign({}, d3Selection, d3Path); 

    d3.path(); 
});