Using different D3 versions on same html page

Question

I am try to construct treelist and treemap in single html page using d3.js. My treelist and treemap are working fine on individual pages,but i want to combine those into single html page.

The problem i am facing is, for treelist i am using d3.js version 3 and for treemap i am using d3.js version 4. So when i try to embedded them into my single page there are version conflicts(it just shows the treemap).

Please guide me how should i resolve the version conflicts.

Following is my d3.js code with Version 3(first col-md-4) and Version 4(col-md-8)

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="row">
    <div class="col-md-4">
        <div id="treelisttest" style="height:500px;">   </div>

        <script>

                    var id = 0;
                    d3.json("data.json", function (err, data) {

                        var tree = d3.layout.treelist()
                                 .childIndent(10)
                                 .nodeHeight(30);

                        var ul = d3.select("#treelisttest").append("ul").classed("treelist", "true");

                        function render(data, parent) {
                            var nodes = tree.nodes(data),
                                duration = 250;
                            function toggleChildren(d) {

                                if (d.children) {
                                    d._children = d.children;
                                    d.children = null;
                                } else if (d._children) {
                                    d.children = d._children;
                                    d._children = null;
                                }
                            }

                            var nodeEls = ul.selectAll("li.node").data(nodes, function (d) {
                                d.id = d.id || ++id;
                                return d.id;
                            });

                            var entered = nodeEls.enter().append("li").classed("node", true)
                                .style("top", parent.y + "px")
                                .style("opacity", 0)
                                .style("height", tree.nodeHeight() + "px")
                                .on("click", function (d) {
                                    toggleChildren(d);
                                    render(parent, d);
                                })
                                .on("mouseover", function (d) {
                                    d3.select(this).classed("selected", true);
                                })
                                .on("mouseout", function (d) {
                                    d3.selectAll(".selected").classed("selected", false);
                                });

                            entered.append("span").attr("class", function (d) {
                                var icon = d.children ? " glyphicon-chevron-down"
                                    : d._children ? "glyphicon-chevron-right" : "";
                                return "caret glyphicon " + icon;
                            });

                            entered.append("span").attr("class", function (d) {
                                var icon = d.children || d._children ? "glyphicon-folder-close"
                                    : "glyphicon-file";
                                return "glyphicon " + icon;
                            });

                            entered.append("span").attr("class", "filename")
                            .html(function (d) { return d.name.substring(0, 5) });

                            nodeEls.select("span.caret").attr("class", function (d) {
                                var icon = d.children ? " glyphicon-chevron-down"
                                    : d._children ? "glyphicon-chevron-right" : "";
                                return "caret glyphicon " + icon;
                            });

                            nodeEls.transition().duration(duration)
                                .style("top", function (d) { return (d.y - tree.nodeHeight()) + "px"; })
                                .style("left", function (d) { return d.x + "px"; })
                                .style("opacity", 1);
                            nodeEls.exit().remove();
                        }

                        render(data, data);

                    });
        </script>

    </div>
    <div class="col-md-8">
        <div id="maptest">

            <script src="http://d3js.org/d4.v3.min.js"></script>


            <svg width="500" height="1000"></svg>

            <script src="d3.v4.min.js"></script>
            <script>
                var svg = d3.select("#maptest")
                       .append("svg")
                       .attr("width", "100%")
                       .attr("height", "50%")
                       .call(d3.zoom().on("zoom", function () {
                           svg.attr("transform", d3.event.transform)
                       }))
                       .append("g")



            var treemap = d3.treemap()
                .tile(d3.treemapResquarify)
                .size([1000, 1000])
                .round(true)
                .paddingInner(1);

            d3.json("data.json", function (error, data) {
                if (error) throw error;

            var root = d3.hierarchy(data)
                .sum(sumBySize)

                treemap(root);

                var cell = svg.selectAll("g")
                    .data(root.leaves())
                    .enter().append("g")
                    .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });

                cell.append("rect")
                    .attr("id", function (d) { return d.data.id; })
                    .attr("width", function (d) { return d.x1 - d.x0; })
                    .attr("height", function (d) { return d.y1 - d.y0; })
                    .attr("fill", function (d) { return color(d.data.value); });

                cell.append("clipPath")
                    .attr("id", function (d) { return "clip-" + d.data.id; })
                    .append("use")
                    .attr("xlink:href", function (d) { return "#" + d.data.id; });

                cell.append("text")
                    .attr("dy", ".75em")
                    .text(function (d) { return d.data.name.substring(0, 1); })

                cell.append("title")
                    .text(function (d) { return d.data.id + " with name " + d.data.name });
            });


        function sumByCount(d) {
            return d.children ? 0 : 1;
        }

        function sumBySize(d) {
            return d.value;
        }

            </script>
        </div>
    </div>
</div>

Answer 1

(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="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></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:

// https://d3js.org 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: https://plnkr.co/edit/h174Gcc3YSCJGpNljCOh?p=preview

Answer 2

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

this.d3 = d3;

to

this.d3v3 = d3;

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