dc.js 및 crossfilter.js를로드하는 방법은 무엇입니까?

나는 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>

내가 여기 뭔가 잘못하고 있습니까? 누군가가 후속 링크를 사용하여로드이

출처

2016-09-15 maverick