Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the easy way to load d3-selection-multi along with d3 v4 in RequireJS?

I'm trying to load d3-selection-multi along with d3 v4 using RequireJS. My main script is:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
 <script>
     require.config({
         paths: {
             "d3": "//d3js.org/d3.v4.min",
             "d3-selection-multi": "//d3js.org/d3-selection-multi.v1.min",
             "d3-queue": "//d3js.org/queue.v1.min",
             "underscore": "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min",
             "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min",
             "jquery_easing": "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min",
             "bootstrap": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min",
             "moment": "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min"
         }
     });
 </script>

But d3-selection-multi requires d3-transition and d3-selection, so if I add those then I find out d3-transition requires d3-color and so on and so forth.

Doesn't the normal d3 v4 come with d3-selection, d3-transition, d3-color, and all of that? Does this mean once I choose to use one micro-library then I can't use the normal d3 and I need to define all of the other dependent micro-libraries??

I wanted to use d3-selection-multi so I didn't have to rewrite all of my .attr() to not use {} syntax.

like image 718
hobbes3 Avatar asked Aug 21 '16 06:08

hobbes3


1 Answers

If you don't want to switch your application to d3 micro-libraries entirely, you can reference the dependencies to the bundled d3 library by requirejs map configuration. You can find the required dependencies here.

requirejs.config({
    paths: {
        'd3': '...',
        'd3-selection-multi': '...',
        ...
    },
    map: {
        '*': {
            'd3-color': 'd3',
            'd3-dispatch': 'd3',
            'd3-ease': 'd3',
            'd3-interpolate': 'd3',
            'd3-selection': 'd3',
            'd3-timer': 'd3',
            'd3-transition': 'd3'
        }
    }
});
like image 57
Seb Avatar answered Nov 12 '22 00:11

Seb