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

Question

我尝试使用d3.js在单个html页面中构建treelist和treemap.我的treelist和treemap在单个页面上运行良好,但我想将它们组合成单个html页面.

我面临的问题是,对于treelist我正在使用d3.js 版本3而对于treemap我正在使用d3.js 版本4.因此,当我尝试将它们嵌入到我的单个页面中时,存在版本冲突(它只显示树形图).

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

以下是我的d3.js代码版本3(第一个col-md-4)和版本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

您可以在本地下载脚本的版本3并更改最后一行

this.d3 = d3;

至

this.d3v3 = d3;

因此,您可以使用d3版本4调用d3,以及调用d3v3的库的版本3

Answer 2

（我不知道你为什么要这样做，或者这是否真的有必要。请记住，我只是在回答你的问题，即如何在同一页面中使用 D3 v3 和 v4，没有分析您的目标，或者这是一个XY 问题）。

正如您现在必须知道的，您不能只在 HTML 中引用这两个版本：

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

因为，显然，当您使用d3调用方法时，这会导致冲突。

因此，解决方案是下载两个版本之一并更改源代码。

在此解决方案中，我将更改 v4.x 版本（缩小版）的源代码并使用对 v3.x 的常规引用。你可以反过来做（正如丹妮拉在她的回答中所做的那样），但步骤不一样。

在 D3 v4.x（缩小版）中，您会在开头看到：

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

我要做的是将其更改t.d3为t.d3v4（或您想要的任何其他名称）。

之后，您可以使用d3调用 D3 v3 函数和d3v4（不d3）调用 D3 v4 函数。

就像在这个例子中：

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.

这是带有该代码的 plunker：https ://plnkr.co/edit/h174Gcc3YSCJGpNljCOh?p = preview