cant use with requirejs

[tiagondelgado]

require.min.js:1 Uncaught Error: Script error for: d3-transition require.min.js:1 Uncaught Error: Script error for: d3-transition

requirejs.config({
    "baseUrl": "../js/modules",
    "paths": {
        "jquery"        : ["//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min", "../vendor/jquery-1.11.2.min"],
        "bxslider"      : ["//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min", "../vendor/jquery.bxslider.min"],
        "fitvids"       : ["//cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min", "../vendor/jquery.fitvids.min"],
        "masonry"       : ["//cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min", "../vendor/masonry.pkgd.min"],
        "imagesLoaded"  : ["//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min"],
        "bridget"       : ["../vendor/jquery.bridget"],
        "ammap"         : ["../vendor/ammap"],
        "amcharts"      : ["../vendor/amcharts"],
        "pie"           : ["//amcharts.com/lib/3/pie"],
        "serial"        : ["//amcharts.com/lib/3/serial", "../vendor/serial"],
        "continentsLow" : ["../vendor/continentsLow"],
        "animateit"     : ["../vendor/css3-animate-it"],
        "videojs"       : ["//cdnjs.cloudflare.com/ajax/libs/video.js/5.9.2/video.min", "../vendor/video.min"],
        "prettyPhoto"   : ["//cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min", "../vendor/jquery.prettyPhoto"],
        "timeline"      : ["//cdn.knightlab.com/libs/timeline3/latest/js/timeline-min","../vendor/timeline-min"],
        "d3"            : ["//cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min"],
        "venn"          : ["../vendor/venn"],

    },
    shim: {
        'bxslider'      : ['jquery'],
        'fitvids'       : ['bxslider'],
        'prettyPhoto'   : ['jquery'],
        'timeline'      : ['jquery'],
        'imagesLoaded'  : ['jquery'],
        'timeline'      : ['jquery'],
        'd3'            : { exports: 'd3'},
        'venn'          : { exports: 'venn',
                            deps: ['d3']},
        'masonry'       : ['imagesLoaded'],
        'ammap'         : { exports: 'AmCharts'},
        'amcharts'      : { exports: 'AmCharts'},
        'continentsLow' : ['amcharts'],
        'pie'           : ['amcharts'],
        'serial'        : ['amcharts'],
        'animateit'     : ['jquery'],
    }
});
requirejs(["../main"]);

[benfred]

So - I don't use require.js, but it seems like maybe this is caused because I'm importing 'd3-transition' and 'd3-selection' instead of d3 here.

I'm using the rollup.js module bundler, and the command is 'rollup -g d3-selection:d3,d3-transition:d3' to handle this. Maybe you need something similar with require.js?

[nkugland]

Workaround: use map to fix the imports. http://stackoverflow.com/questions/38912143/how-to-load-a-d3-dependent-script-using-requirejs

Working example that imports Venn.js and D3 using Require.js:

<script src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>

<script>
require.config({
    paths: {
        d3src: "https://d3js.org",
        venn:'https://rawgit.com/benfred/venn.js/master/venn'
    },
    map: {
        '*': {
            'd3'             : 'd3src/d3.v4.min',
            'd3-selection'   : 'd3src/d3-selection.v1.min',
            'd3-transition'  : 'd3src/d3-transition.v1.min',
            'd3-dispatch'    : 'd3src/d3-dispatch.v1.min',
            'd3-timer'       : 'd3src/d3-timer.v1.min',
            'd3-interpolate' : 'd3src/d3-interpolate.v1.min',
            'd3-color'       : 'd3src/d3-color.v1.min',
            'd3-ease'        : 'd3src/d3-ease.v1.min',
        }
    }
});

require(['d3', 'venn', 'd3-selection', 'd3-transition',
         'd3-dispatch', 'd3-timer', 'd3-interpolate', 'd3-color', 'd3-ease'],
    function(d3, venn, selection, transition, dispatch, timer, interpolate, color, ease) {
  d3.select("body").append("h1").text("Successfully loaded D3 and Venn.js");
});
</script>