Javascript 在同一html页面上使用不同的D3版本

我正在尝试使用d3.js在单个html页面中构建树列表和树映射。 我的树列表和树映射在单独的页面上运行良好，但我想将它们合并到单个html页面中

我面临的问题是，对于treelist，我使用的是d3.js版本3，对于treemap，我使用的是d3.js版本4。因此，当我尝试将它们嵌入到我的单个页面中时，会出现版本冲突（它只显示树映射）

请指导我如何解决版本冲突

下面是我的d3.js代码，版本3（第一个col-md-4）和版本4（col-md-8）

var-id=0；
d3.json（“data.json”，函数（err，data）{
var tree=d3.layout.treelist（）
.childIndent（10）
.nodeHeight（30）；
var ul=d3.选择（“树列表测试”）.追加（“ul”）.分类（“树列表”，“真”）；
函数渲染（数据、父级）{
变量节点=树节点（数据），
持续时间=250；
功能切换子项（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则，如果（d._儿童）{
d、 儿童=d.\U儿童；
d、 _children=null；
}
}
var nodeEls=ul.selectAll（“li.node”）.数据（节点，函数（d）{
d、 id=d.id | |++id；
返回d.id；
});
var entered=nodeEls.enter（）.append（“li”）.classed（“node”，true）
.style（“顶部”，父级.y+“px”）
.style（“不透明度”，0）
.style（“高度”，树.节点高度（）+“px”）
.打开（“单击”，功能（d）{
切换儿童（d）；
提供（父母，d）；
})
.on（“鼠标悬停”，功能（d）{
d3.选择（此）.classed（“已选择”，真）；
})
.开启（“鼠标出”，功能（d）{
d3.选择全部（“.selected”）.classed（“selected”，false）；
});
已输入。追加（“span”）.attr（“类”，函数（d）{
var icon=d.children？“字形图标V形向下”
：d.“儿童？”字形图标V形右“：”；
返回“插入符号图示符”+图标；
});
已输入。追加（“span”）.attr（“类”，函数（d）{
var icon=d.children | | d._children？“glyphicon文件夹关闭”
：“字形图标文件”；
返回“glyphicon”+图标；
});
entered.append（“span”）.attr（“类”、“文件名”）
.html（函数（d）{返回d.name.substring（0，5）}）；
nodeEls.select（“span.caret”）.attr（“类”，函数（d）{
var icon=d.children？“字形图标V形向下”
：d.“儿童？”字形图标V形右“：”；
返回“插入符号图示符”+图标；
});
nodeEls.transition（）.duration（持续时间）
.style（“top”，函数（d）{return（d.y-tree.nodeHeight（））+“px”}）
.style（“左”，函数（d）{返回d.x+“px”；}）
.样式（“不透明”，1）；
nodeEls.exit（）.remove（）；
}
渲染（数据，数据）；
});
var svg=d3。选择（“映射测试”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“50%”）
.call（d3.zoom（）.on（“zoom”，函数）（）{
attr（“transform”，d3.event.transform）
}))
.附加（“g”）
var treemap=d3.treemap（）
.瓷砖（d3.树预方形）
.尺寸（[10001000]）
.round（真）
.填塞器（1）；
d3.json（“data.json”），函数（错误，数据）{
如果（错误）抛出错误；
var root=d3.层次结构（数据）
.sum（按大小计算）
树形图（根）；
var cell=svg.selectAll（“g”）
.data（root.leaves（））
.enter（）.append（“g”）
.attr（“转换”，函数（d）{return“translate”（+d.x0+），“+d.y0+”）；}）；
cell.append（“rect”）
.attr（“id”，函数（d）{返回d.data.id；}）
.attr（“宽度”，函数（d）{返回d.x1-d.x0；}）
.attr（“高度”，函数（d）{返回d.y1-d.y0；}）
.attr（“fill”，函数（d）{返回颜色（d.data.value）；}）；
cell.append（“clipPath”）
.attr（“id”，函数（d）{return“clip-”+d.data.id；}）
.append（“使用”）
.attr（“xlink:href”，函数（d）{ret
<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>

this.d3 = d3;

this.d3v3 = d3;

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

// 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...

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.

     require( ["js/common/d3.v3.min"], function(d3) {
        // tree list code here
       });

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