load d3 with amd using dojo - d3.js

Question

Hi I'm using dojo in amd mode for my main app (html page). I would like to create a module that references d3 library to create some charts. I'm having trouble creating this module -- what I've got so far for the module (a javascript file) is this:
define(["d3"], function (d3) {
return {
setd3ChartData: function () {
//this function can be called from my main app
//but d3 isnt linked to the d3 js library
}
}
});
in my main app I've got a link to the d3 libary in a script tag
How can I get this script link into the module? I can access d3 library just fine from main app
Thanks
Pete

Answer 1

When you want to use D3 with Dojo you probably first want to define the D3 package in your Dojo config. For example (when using a CDN):
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "d3",
location: "http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/"
}]
}
</script>
Then you can use D3 by using:
require([ "d3/d3" ], function(d3) {
// Do stuff with "d3"
});
The reason you have to use "d3/d3" and not just "d3" is that the part before the / indicated the package name, in this case it's d3 (which we configured using dojoConfig).
The second part is the actual file, or in this case d3.js.
I also made a JSFiddle to show a working example of D3 loaded using the AMD loader. In that example I placed the Dojo configuration under the Fiddle options, but the setup is the same.
I also renamed the callback to d3Lib, because D3 by defaults creates the d3 global variable and now you can clearly see it's working with AMD.
If you want to use the minified version you can load "d3/d3.min".