grafico a linee di dati json in d3

Sto imparando d3. Voglio fare un grafico a linee usando i dati JSON. I dati che sto usando sono:grafico a linee di dati json in d3

var data = [ 
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292}, 
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292}, 
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292}, 
    { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292}, 
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292}, 
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}];

Voglio "su" sull'asse xe "valore" sull'asse y. Inoltre ho bisogno di analizzare "at" solo come tempo. Per favore forniscimi indicazioni su come procederò ulteriormente. Il codice fino ad ora che ho implementato è qui sotto. Ho provato a cercare la documentazione per questo ma non ne ho trovata.

<html> 
    <head> 
     <title>line chart on json</title> 
     <script src="http://d3js.org/d3.v2.js"></script> 
     <style> 
      /* tell the SVG path to be a thin blue line without any area fill */ 
      path { 
       stroke: steelblue; 
       stroke-width: 1; 
       fill: none; 
      } 
     </style> 
    </head> 
    <body> 

    <script> 

    var width = 400; 
    var height = 150; 

    var data = [ 
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292}, 
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292}, 
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292}, 
    { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292}, 
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292}, 
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 

    var x = d3.scale.ordinal(); 

    var y = d3.scale.linear().range([height, 0]); 
    var xAxis = d3.svg.axis().scale(x).orient("bottom"); 
    var line = d3.svg.line() 
     .x(function(d) { return x(d.at);}) 
     .y(function(d) { return y(d.value); }) 
     .interpolate("linear") 
    var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("height", "150"); 
    function make_y_axis() { 
     return d3.svg.axis().scale(y).orient("left").ticks(5) 
    } 

    </script> 

    </body> 
</html>

fonte

2014-11-26 user1915636

Guardate questo esempio http://bl.ocks.org/crayzeewulf/9719255

Ci usato 2 grafici, ma è possibile utilizzare un solo e inserire i dati come si desidera.

Per quanto riguarda la data è possibile guardare questo esempio http://jsfiddle.net/robdodson/KWRxW/, xAxis in particolare.

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom') 
    .ticks(d3.time.days, 1) 
    .tickFormat(d3.time.format('%a %d')) 
    .tickSize(0) 
    .tickPadding(8);

fonte

2014-11-26 12:29:30

Qual è graph1 nella riga sotto:

var grafico = d3.select (Graph1) .Append ("SVG: svg"). Attr ("width", "300") . attr ("altezza", "150");

fonte

2018-01-02 11:26:00

grafico a linee di dati json in d3

risposta

Problemi correlati