2016-11-06 4 views
1

D3チャートに問題があります。データはロードされず、コンソールにエラーが表示されます。D3チャート実装エラー

"(index):54 Uncaught TypeError:nv.addGraphは関数(...)ではありません"。

<!DOCTYPE html> 

<meta charset="utf-8"> 
<title>Doodsoorzaak door huidkanker </title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> 

<!-- <link href="css/d3.min.css" rel="stylesheet" type="text/css"> --> 
<link rel="stylesheet" href="css/colors.css" /> 
<link rel="stylesheet" href="css/height.css" /> 
<link rel="stylesheet" href="css/cssstyles.css" /> 

</script> 
<style> 
    text { 
     font: 12px sans-serif; 
    } 
    svg { 
     display: block; 
    } 
    html, body, #chart1, svg { 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     width: 100%; 
    } 
</style> 

</head> 

<body> 
    <container> 
    </ul> 
     <header> 
      <nav class="col-xs-12 h300" class="navbar navbar-default navbar-inverse" role="navigation"> 
       <div class="container-fluid"> 
        <center><img id="logo" src="img/Logo.png" width="auto" height="auto" /></center>    
         <ul id="menu"> 
         <center> <h4> De laatste jaren is het aantal sterfte gevallen door huidkanker toegenomen. Vooral 60-plussers sterven het vaakst door huidkanker.</h4> </center> 
         </ul> 

       </div> 
      </nav> 
     </header> 
     <body> 

      <div id="chart"> 
       <svg></svg> 
      </div> 

      <script type="text/javascript"> 
nv.addGraph(function() { 
    var chart = nv.models.discreteBarChart() 
     .x(function(d) { return d.label }) //Specify the data accessors. 
     .y(function(d) { return d.value }) 
     .staggerLabels(true) //Too many bars and not enough room? Try staggering labels. 
     .tooltips(false)  //Don't show tooltips 
     .showValues(true)  //...instead, show the bar value right on top of each bar. 
     .transitionDuration(350) 
     ; 

    d3.select('#chart svg') 
     .datum(exampleData()) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

//Each bar represents a single discrete quantity. 
function exampleData() { 
return [ 
    { 
     key: "Cumulative Return", 
     values: [ 
     { 
      "label" : "Infectieuze en parasitaire ziekten" , 
      "value" : 3104 
     } , 
     { 
      "label" : "Ziekten van hart en vaatstelsel" , 
      "value" : 37862 
     } , 
     { 
      "label" : "Uitwendige oorzaken v. ziekte en sterfte" , 
      "value" : 6813 
     } 
     ] 
    } 
    ] 

} 



     </script> 


     </body>   

     <footer> 
      <section class="col-xs-12 h100"> 
       <center> 
        <p> 
         <br><br> 
          Copyright Tufan Ugurel 
        </p> 
       </center> 
      </section> 
     <footer> 
    </container> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

    <script href="js/d3.min.js"></script> 

これは私からのコードを持ってデモです: http://nvd3.org/examples/discreteBar.html

私はそれがない愚かなことですね!助けてくれてありがとう

答えて

1

NVD3は参照しているようですが、D3のみを宣言しているようです。 D3の上にあるパッケージであるNVD3を使用している場合は、上に両方を含める必要があります。

+0

NVD3を実装しても、同じ問題が発生します。 –

+0

未知型エラー:nv.models.discreteBarChart(...)。x(...)。y(...)。staggerLabels(...)。ツールヒント(...)。showValues(...)。 transitionDurationは関数ではありません(...) –

+0

これをダウンロードしてみてください:https://github.com/novus/nvd3/zipball/master – shreman

関連する問題