Verwenden von techanJS D3-Beispielen mit JSON-Daten

Question

Ich möchte ein paar der technischen Beispiele in meiner Anwendung verwenden, habe aber Mühe, meine eigenen Daten zu verwenden.

Hier ist die example code for the close chart, die ich verwenden möchte.

Ich habe ein Spiel! Framework-Anwendung, die in einer Liste geht [CloseList] Array, wird diese dann in ein JSON-Objekt:

var closesJSON = @{Html(new Gson().toJson(closes))}; 

ich dann gehe davon aus, dass ich in der Lage sein wird, d3.csv() mit d3.json zu ersetzen () aber ich finde kein funktionierendes Beispiel und mein Hacking hat mich bisher nirgendwo hingebracht.

d3.csv("data.csv", function(error, data) { 
    var accessor = close.accessor(); 

    data = data.slice(0, 200).map(function(d) { 
     return { 
      date: parseDate(d.Date), 
      open: +d.Open, 
      high: +d.High, 
      low: +d.Low, 
      close: +d.Close, 
      volume: +d.Volume 
     }; 
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); }); 

    x.domain(data.map(accessor.d)); 
    y.domain(techan.scale.plot.ohlc(data, accessor).domain()); 

    svg.append("g") 
      .datum(data) 
      .attr("class", "close") 
      .call(close); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Price ($)"); 
}); 

Code hier arbeiten, macht dies:

d3.json("/api/closedata/@equity.getId", function(error, data) { 
    var accessor = close.accessor(); 

    data = data.map(function(d,i) { 
     console.log(d.high); 
     return { 
      date : parseDate(d.closeDate), 
      open : d.openPrice, 
      high : d.high, 
      low : d.low, 
      close : d.closePrice, 
      volume : d.volume 
     } 
    }).sort(function(a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); }); 


    x.domain(data.map(accessor.d)); 
    y.domain(techan.scale.plot.ohlc(data, accessor).domain()); 

    svg.append("g") 
      .datum(data) 
      .attr("class", "close") 
      .call(close); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Price ($)"); 
}); 

Answer 1

ich Sie Ihre Daten in einer JSON-Datei eindecken können, müssen Sie die Funktion nur verwenden

d3.json("file.json",callback); 

nach, Sie haben um den Namen der Attribute im Code zu ändern (die Attribute auf seinem CSV sind wahrscheinlich anders als Ihre Attribute in JSON)

Callback, ist normalerweise eine Funktion, aber ich glaube nicht, dass Sie in Ihrem Code andere Änderungen vornehmen müssen.

Überprüfen Sie Ihre Json (verwenden Sie eine Website wie http://jsonprettyprint.com/), testen Sie den Code auf Ihrem Computer (http://bl.ocks.org/andredumas/af8674d57980790137a0) mit dem Standard-csv, um zu sehen, ob es funktioniert. Es ist Arbeit, ändern Sie, um json zu verwenden (wie ich Ihnen sagte).