D3-tip was borked in require.js, “undefined is not a function”. GGRR

Dependency management is pretty critical in development. If you write javascript you should be using requirejs or something similar. If you want to make pretty charts using D3 and give them tooltips using the d3-tip library then you may experience some pain. The current AMD code for D3-tip may not work for you. d3.tip() may give you an error “undefined is not a function”.

There was a fix submitted for this long ago by alanhamlett but for some reason it was not merged. This ticked me off just enough to re-submit the patch, and to offer my fork with the patch as a service to others. Please view the pull request here: https://github.com/Caged/d3-tip/pull/81

To use the fix in bower, please replace d3-tip in bower.json with this:
“d3-tip”: “https://github.com/hendrixski/d3-tip.git#0.6.5_bower_fix”

You can run bower install https://github.com/hendrixski/d3-tip.git#0.6.5_bower_fix –save   to have this added to your bower.json for you.

If you don’t use bower, then please consider using it. You can git pull the code directly from the above-mentioned repo as well.

You probably already have this included in require.js, but just to  show you how I did it, add the following to paths and shim:
paths:{ “d3-tip”: “../bower_components/d3-tip/index”}
shim: { d3-tip: [“d3”]}

Advertisements

2 thoughts on “D3-tip was borked in require.js, “undefined is not a function”. GGRR

  1. Pingback: Rails – d3-tip gem not loading | 我爱源码网

  2. Are you sure you’re using the module correctly? When I first required it I got the error that you described above, but after looking at the source I figured out that you need to require the module like this:

    require.config({
    paths: { d3: ‘/path/to/d3’, d3Tip: ‘/path/to/d3/tip’}
    shim: { d3Tip: [‘d3’] }
    });

    // My d3 module
    define([‘d3’, ‘d3Tip’], function (d3, d3Tip) {
    var tip =d3Tip()
    .attr(‘class’, ‘d3-tip’)
    .offset([-10, 0])
    .html(function(d) {
    return “Frequency: ” + d.frequency + “”;
    });

    var svg = d3.select(“body”).append(“svg”);

    svg.call(tip);
    });

What did you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s