how to integrate d3 with require.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) { /* .... */ });