d3.js - d3をrequire.jsと統合する方法

Question

d3 を require/backbone アプリケーションに統合しようとすると問題が発生します。私のmain.jsには次のようなものが含まれています：

require.config({
  paths: {
    d3: 'libs/d3/d3.v2.min'
    backbone: ...
    ...
  }
});

そして、私のバックボーンビューは（コーヒースクリプトで）

define ['backbone','d3',...], (Backbone,d3,...) ->
  MyView = Backbone.View.extend
    initialize: () ->
      d3.somefunction

コンソール ログには、d3 が null と表示されます。このタイプのアプリケーションに d3 を統合する簡単な方法はありますか?

Answer 1

d3 は define() を呼び出してモジュールを宣言しないためd3、バックボーン ビューへのローカル参照は目的のものではありません。d3 によって作成されたグローバル変数を使用します。

define(['backbone', 'd3'], function (backbone, ignore) {
    //Use global d3
    console.log(d3);
});

または、shim 構成を使用して、d3 のエクスポート値を宣言します。

requirejs.config({
    shim: {
        d3: {
            exports: 'd3'
        }
    }
});

これにより、d3 のモジュール値としてグローバル d3 を使用するように requirejs に指示されます。

Answer 2

互換性のあるライブラリが存在する場合、d3.v3 は自身を AMD モジュールとして登録するようになったため、次の回避策を使用する必要があります ( http://pastebin.com/d5ZDXzL2から)。

requirejs.config({
    paths: {
        d3: "scripts/d3.v3",
        nvd3: "scripts/nv.d3"
    },
    shim: {
        nvd3: {
          exports: 'nv',
          deps: ['d3.global']
        }
    }
});
// workaround for nvd3 using global d3
define("d3.global", ["d3"], function(_) {
  d3 = _;
});

define('myModule', ['nvd3'], function(nc) { /* .... */ });

Answer 3

理由はわかりませんが、これは機能します。モジュールをロードする適切な方法であるかどうかはわかりません。

require(['libs/jquery', 'libs/d3'], function($, ignore)    {
  d3 = require('libs/d3');
});