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

Question

我尝试使用d3.js在单个html页面中构建treelist和treemap。 我的treelist和treemap在个别页面上工作正常，但我想将它们合并到单个html页面中。

我面临的问题是，对于树形列表我使用d3.js 版本3和树形图我使用d3.js 版本4。所以当我尝试将它们嵌入到单个页面中时，存在版本冲突（它仅显示树形图）。

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

以下是我与版本3（第一COL-MD-4）和版本4（COL-MD-8）d3.js代码

<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和第3版打电话d3v3

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 4.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来解决这个问题

• 树形列表D3 版本：3

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

• 树形图D3 版本：4

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

  }

注意：您需要导入require.js文件：从这里

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

下载

将导入语句放在主体的末尾标签即

<体>

//代码 ....

</BODY>