2016-09-15 11 views
1

私はdc.jsとcrossfilter.jsを使用しようとしていますが、私はいつもdc.jsとcrossfilter.jsをロードするには?

"Uncaught TypeError: Cannot read property 'format' of undefined dc.js:484 
Uncaught TypeError: Cannot read property '1' of null header.js:3 
Uncaught ReferenceError: dc is not defined (index):39 " 

私がいない問題でライブラリをロードする順序を考えて、私はフォーマットであり、その理由が何であるかを見つけ出すことができませんでしたを取得しますそれは問題を引き起こす!私も、私はここで間違って何かをやっている私のindex.html データをロードするために

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="css/dc.css"/> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <script type="text/javascript" src="js/crossfilter.js" ></script> 
    <script type="text/javascript" src="js/d3.js" ></script> 
    <script type="text/javascript" src="js/dc.js"></script> 
</head> 

<body> 

<div class="container"> 
<script type="text/javascript" src="js/header.js"></script> 

    <p>This example demonstrates assigning a threshold dynamically to a pie chart by creating a new dimension based on slider input.</p> 
    <div id="inputSlider"> 
     <div><input type="range" id="slideRange" value="0.5" min="0" max="1.0" step="0.1" onchange="updateSlider(this.value)"></div> 
     Score threshold: <span id="sliderValue">0.5</label> 
    </div> 
    <div id="dc-coreAcc-piechart"></div> 
    <div id="dc-score-barchart"></div> 

    <script type="text/javascript"> 
    var data = [ 
       { "book": "A", "scores": 45 }, 
       { "book": "B", "scores": 34 }, 
       { "book": "C", "scores": 54 }, 
       { "book": "D", "scores": 27 }, 
       { "book": "E", "scores": 70 }, 
       { "book": "F", "scores": 25 }, 
       { "book": "G", "scores": 92 }, 
       { "book": "H", "scores": 22 }, 
       { "book": "I", "scores": 40 }, 
       { "book": "J", "scores": 10 }, 
       { "book": "K", "scores": 40 } 
       ]; 
    //## Create Chart Objects 
    var scoreChart = dc.barChart("#dc-score-barchart") 
         .xAxisLabel('book_id') 
         .yAxisLabel('score'); 
    var goodYesNoPieChart = dc.pieChart('#dc-coreAcc-piechart'); 
    //### Create Crossfilter Dimensions and Groups 
    var ndx = crossfilter(data); 
    var all = ndx.groupAll(); 
    var bookDimension = ndx.dimension(function (d) {return d.book;}), 
     bookscoresGroup = bookDimension.group().reduceSum(function(d) {return d.scores;}); 
    //## score bar chart 
    scoreChart.width(320) 
     .height(320) 
     .dimension(bookDimension) 
     .group(bookscoresGroup) 
     .elasticY(true) 
     .x(d3.scale.ordinal()) 
     .xUnits(dc.units.ordinal) 
     .colors(["orange"]) 
     .yAxis().ticks(5); 
    //## pie chart 
    // reusable function to create threshold dimension 
    function coreCount_from_threshold() { 
     var scoreThreshold=document.getElementById('slideRange').value; 
     scoreThreshold=parseFloat(scoreThreshold); 
     if (isNaN(scoreThreshold)) { 
      scoreThreshold=0.5 
     } 
     return ndx.dimension(function (d) { 
      var maxNumber=80; 
      if (d.scores >maxNumber*scoreThreshold) { 
       return 'High'; 
      } else { 
       return 'Low'; 
      } 
     }); 
    } 
    var coreCount = coreCount_from_threshold(); 
    var coreCountGroup = coreCount.group(); 
    goodYesNoPieChart 
     .width(320) 
     .height(320) 
     .radius(120) 
     .innerRadius(40) 
     .dimension(coreCount) 
     .title(function(d){return d.value;}) 
     .group(coreCountGroup) 
     .label(function (d) { 
      if (goodYesNoPieChart.hasFilter() && !goodYesNoPieChart.hasFilter(d.key)) { 
       return d.key + '(0%)'; 
      } 
      var label = d.key; 
      if (all.value()) { 
       label += '(' + Math.floor(d.value/all.value() * 100) + '%)'; 
      } 
      return label; 
     }) 
    dc.renderAll(); 
    //## change slider score value to re-assign the data in pie chart 
    function updateSlider(slideValue) { 
     var sliderDiv = document.getElementById("sliderValue"); 
     sliderDiv.innerHTML = slideValue; 
     coreCount.dispose(); 
     coreCount = coreCount_from_threshold(); 
     coreCountGroup = coreCount.group(); 
     goodYesNoPieChart 
      .dimension(coreCount) 
      .group(coreCountGroup); 
     dc.redrawAll(); 
    } 
    </script> 
</div> 
</body> 
</html> 

を外部ファイルを使用していないのですか?誰かがこの

答えて

2

に私を助けることができる次のリンクを使用して読み込むようにしてください:

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.0-dev/dc.js

https://cdnjs.cloudflare.com/ajax/libs/dc/1.6.0/dc.css

私はこれらのリンクはあなたを助けることを願っています。

+0

まだ私のコンソールに同じエラーが表示されています:( – maverick

+2

他のエラーの原因となるd3が悪いようですが、https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3を試してみてください。 js – Gordon

0

Dc.jsはまだD3バージョン4をサポートしていません。 D3 v3.xに切り替えて、問題を修正する必要があります。

関連する問題