d3.js - 如何将 d3 与 require.js 集成

Question

我在尝试将 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 为空。有没有一种简单的方法可以将 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'
        }
    }
});

这将告诉 requirejs 使用全局 d3 作为 d3 的模块值。

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');
});