2016-06-27 8 views
0

Ich bin neu in D3 und NVD3. Ich baue eine Webservice in ASP.NET, und ich versuche auch das folgende stackedArea Beispiel mit NVD3.js zu reproduzieren: http://nvd3.org/examples/stackedArea.htmlIch versuche, ein Beispiel mit NVD3 zu reproduzieren, aber nicht funktioniert

enter image description here

Mein Ziel ist es, eine Ajax-Anforderung mit einer gespeicherten Prozedur zu machen, sobald Ich bekomme das Beispiel zum Laufen.

Ich habe kopiert-und-klebte das Beispiel-Code in meinem Code:

<!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> 

Ich habe gerettet auch die Probe JSON-Datei: http://nvd3.org/examples/stackedAreaData.json (im Beispiel). Ich stecke jedoch eine ganze Weile fest und es funktioniert nicht. Ich würde das Feedback der Community sehr schätzen, wenn ich einen offensichtlichen Fehler mache. Vielen Dank!

+0

Gibt es irgendwelche Fehler in der Konsole oder fehlgeschlagene Anfragen? Ich meine in den Dev Tools des Browsers. –

Antwort

1

Zunächst einmal sicher, dass Sie die richtigen Versionen der Bibliotheken haben:

  • d3.v3
  • nv.d3 # 1.8.1

, zweitens .datum(d3.read)-.datum(data) ändern. Laut der D3 v3.x API refrence existiert d3.read gar nicht!

Hier ist ein funktionierendes Demo: https://jsfiddle.net/w1snyrj4/

+0

Vielen Dank !!! : D Ich war auf etwas so Triviales festgefahren. – Johnathan