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 problem）。

正如您现在必须知道的那样，您不能仅在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的常规引用。你可以采取相反的方式（如Daniela在her answer中所做的那样），但步骤不一样。

在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

Answer 3

我使用RequireJS解决此问题

treelist d3 版本：3

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

treemap d3 版本：4

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

}

注意：您需要导入require.js文件：从此处下载

http://requirejs.org/docs/1.0/docs/download.html

将import语句放在body标签的末尾，即

＆LT;体＆GT;

//代码 ....

＆LT; / body＆gt;

在相同的html页面

3 个答案: