how to integrate d3 with require.js - d3.js

Question

I'm having problems trying to integrate d3 into a require/backbone application. My main.js contains something like:
require.config({
paths: {
d3: 'libs/d3/d3.v2.min'
backbone: ...
...
}
});
And my backbone view something like (in coffeescript)
define ['backbone','d3',...], (Backbone,d3,...) ->
MyView = Backbone.View.extend
initialize: () ->
d3.somefunction
Console log says d3 is null. Is there a simple way to integrate d3 into this type of application?

Answer 1

d3 does not call define() to declare a module, so the local d3 reference to the backbone view will not be what you want. Either use the global variable made by d3:
define(['backbone', 'd3'], function (backbone, ignore) {
//Use global d3
console.log(d3);
});
Or use the shim config to declare an exports value for d3:
requirejs.config({
shim: {
d3: {
exports: 'd3'
}
}
});
That will tell requirejs to use the global d3 as the module value for d3.

Answer 2

Since d3.v3 now registers itself as an AMD module if a compatible library is present, you'll need to use this workaround (from 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

I am not sure why but this works. I am not sure if it is the proper way of loading a module.
require(['libs/jquery', 'libs/d3'], function($, ignore) {
d3 = require('libs/d3');
});