2016-06-27 19 views
0

を働いていません。私は、ASP.NETでWebサービスを構築しています、と私はまたNVD3.jsで次stackedArea例を再現しようとしています: http://nvd3.org/examples/stackedArea.html私はNVD3に例を再現しようとしているが、私はD3とNVD3に新しいです

enter image description here

私の目標はかつて、ストアドプロシージャでAJAXリクエストを作ることです私はその実例を得る。

私は自分のコード内のサンプルコードをコピー・アンド・ペーストしています:

<!DOCTYPE html> 
<html> 
<head> 

    <link href="css/nv.d3.css" rel="stylesheet" type="text/css"> 
    <script src="scripts/d3.min.js" charset="utf-8"></script> 
    <script src="scripts/nv.d3.js"></script> 

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

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

<script> 
    d3.json('scripts/stackedAreaData.json', function(data) { 
     nv.addGraph(function() { 
      var chart = nv.models.stackedAreaChart() 
          .x(function (d) { return d[0] }) 
          .y(function (d) { return d[1] }) 
          .clipEdge(true) 
          .useInteractiveGuideline(true) 
      ; 

      chart.xAxis 
       .showMaxMin(false) 
       .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) }); 

      chart.yAxis 
       .tickFormat(d3.format(',.2f')); 

      d3.select('#chart') 
       .datum(d3.read) 
       .transition().duration(500).call(chart); 

      nv.utils.windowResize(chart.update); 

      return chart; 
     }); 
    }) 
</script> 
</body> 
</html> 

私はサンプルJSONファイルも保存されています:http://nvd3.org/examples/stackedAreaData.json(例で与えられたが)。しかし、私はしばらくの間立ち往生しており、うまくいきません。私は明らかな間違いをしている場合、コミュニティのフィードバックに非常に感謝します。どうもありがとうございました!

+0

は、コンソールにエラーまたは失敗した要求がありますか?私はブラウザの開発ツールを意味します。 –

答えて

1

まず第一に、あなたはライブラリの右側のバージョンを持っていることを確認してください。

  • d3.v3
  • nv.d3#1.8.1

第二に、.datum(data).datum(d3.read)を変更します。 D3 v3.x APIによるとrefrenced3.readはまったく存在しません!ここで

は、作業のデモです:https://jsfiddle.net/w1snyrj4/

+0

ありがとうございました!私は些細なことでうんざりしていた。 – Johnathan

関連する問題