使用dc.js，d3.js和交叉過濾器的參考錯誤

我試圖生成一個測試dc.js圖，但無法擺脫引用錯誤，無論我做什麼以及如何更改源文件。具體而言，我試圖複製this tutorial的示例，這應該導致this graph。但是，當我執行完全相同的代碼時，會出現兩個引用錯誤; ReferenceError：未定義d3，並且未定義ReferenceError：dc。這裏是我的html頁面：使用dc.js，d3.js和交叉過濾器的參考錯誤

 <!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script type="text/javascript" src="http://cdnjs.buttflare.com/ajax/libs/dc/1.7.0/dc.js"></script> 
     <script type="text/javascript" src="crossfilter.js"></script> 
     <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

    </head> 
<body style="background-color: #CBD0E7"> 
</body> 
<div id="graphdiv"></div> 
<div id="legenddiv"></div> 
<div id="chart-line-hitsperday"></div> 
    <script type="text/javascript"> 
     var data = [ 
      {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
      ...data... 
      {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
     ]; 

     var instance = crossfilter(data); 

     var parseDate = d3.time.format("%m/%d/%Y").parse; 

     data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.total = d.http_404 + d.http_302 + d.http_200; 
     }); 

     print_filter("data"); 

     var dateDim = instance.dimension(function(d) { return d.date; }); 
     var hits = dateDim.group().reduceSum(function(d) { return d.total; }); 
     var minDate = dateDim.bottom(1)[0].date; 
     var maxDate = dateDim.top(1)[0].date; 
     var hitslineChart = dc.lineChart("#chart-line-hitsperday"); // reference error number 1 is here. 

     hitslineChart 
      .width(500).height(200) 
      .dimension(dateDim) 
      .group(hits) 
      .x(d3.time.scale().domain([minDate,maxDate])); 

     dc.renderAll(); 

     function print_filter(filter){ 
      var f=eval(filter); 
      if (typeof(f.length) != "undefined") {}else{} 
      if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{} 
      if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{} 
      console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]")); 
     } 

    </script> 
    </html>

最可氣的是，D3的參考誤差範圍內dc.js本身。我試過下載d3和dc的源文件並在本地引用它們;沒有運氣。我必須爲crossfilter做這件事，因爲我找不到它的源代碼鏈接。

來源

2015-04-05 IronWaffleMan

我看到你使用雲對接...... – 2017-07-22 21:15:36

dc.js依賴於d3.js，所以d3.js應該先出現。 crossfilter.js似乎是獨立的，所以它可以出現在任何地方。正確的順序是

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js" charset="utf-8"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>

不要忘了包括dc.css，或者您的地塊將是醜陋

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css"/>

PS只看的jsfiddle部分外部資源，你會發現那裏所有需要引用。

來源

2015-04-05 02:25:12 mbeloshitsky

哇，甚至不知道源是順序依賴的。謝謝，這解決了我的問題:) – IronWaffleMan 2015-04-05 02:56:03

使用dc.js，d3.js和交叉過濾器的參考錯誤

回答

相關問題