web-dev-qa-db-ja.com

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

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

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

そして私のバックボーンは（coffeescriptで）のようなものを見ます

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

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

d3.jsrequirejs
22
Serge Anido

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

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

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

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

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

50
jrburke

互換性のあるライブラリが存在する場合、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) { /* .... */ });
4
webXL

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

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