Accepted answer

you can download the version 3 of the script locally and change the last line from

this.d3 = d3;


this.d3v3 = d3;

so you can use d3 version 4 calling d3, and the version 3 of the library calling d3v3


i use requirejs to resolve this issue

  • treelist d3 version : 3

         require( ["js/common/d3.v3.min"], function(d3) {
            // tree list code here
  • treemap d3 version : 4

    require( ["js/common/d3.v4.min"], function(d3) {       
    // treemap code here


note : you need to import require.js file : download it from here

put the import statement at the end of body tag i.e.

< body>

// code ....

< /body >


(i don't know why you are trying to do this, or if this is really necessary. have in mind that i'm just answering your question, that is, how to use d3 v3 and v4 in the same page, without analysing your objectives or if this is an xy problem).

as you must know by now, you cannot just reference both versions in the html:

<script src=""></script>
<script src=""></script>

because, obviously, that will cause a conflict when you use d3 to call the methods.

thus, the solution is downloading one of the two versions and changing the source code.

in this solution, i'll change the source code of the v4.x version (minified) and use the regular reference to the v3. you can do the other way around (as daniela did in her answer), but the steps are not the same.

in d3 v4.x (minified), you see this at the beginning:

// version 4.9.1. copyright 2017 mike bostock.
(function(t, n) {
    "object" == typeof exports && "undefined" != typeof module ?
        n(exports) : "function" == typeof define && define.amd ?
        define(["exports"], n) : n(t.d3 = t.d3 || {})
}) etc...

what i'm gonna do is changing that t.d3 to t.d3v4 (or any other name you want).

after that, you can use d3 to call your d3 v3 functions and d3v4 (not d3) to call your d3 v4 functions.

like in this example:

var scalev3 = d3.scale.linear()
    //note:    ^----- use `d3` for d3 v3 functions
    .range([0, 5000])

var scalev4 = d3v4.scalelinear()
    //note:     ^----- use `d3v4` for d3 v4 functions
    .range([0, 200]);

console.log(scalev3(0.4))//logs 2000, as expected.
console.log(scalev4(0.4))//logs 80, as expected.

here is the plunker with that code:

Related Query