relativo alle date sull'asse d3.js

Question

Come si può rendere l'asse X della linea in base alla data in d3.js?

Sto tentando di insegnarmi come usare d3.js. Ho esaminato gli esempi forniti e ho tentato di ricreare il grafico a linee utilizzando i dati forniti da json. Sono in grado di alimentare i dati nel grafico a linee, ma l'asse x dovrebbe essere una data invece di un numero. Il formato della data che sto usando è MM/GG/AA, ma il grafico traccia tutto a 0. I miei dati json stanno attraversando bene, ma sto avendo problemi a capire come tracciare le coordinate x. Questo è stato preso direttamente da line.js che viene fornito nella cartella degli esempi d3.js quando scaricato. La parte data non fa il trucco. Spero che qualcuno possa indicarmi un esempio o essere in grado di spiegare come posso farlo funzionare.

d3.json('jsonChartData.action', 
    function (data) { 
    console.log(data); 

    var w = 450, 
    h = 275, 
    p = 30, 
    x = d3.scale.linear().domain([0, 100]).range([0, w]), 
    y = d3.scale.linear().domain([0, 100]).range([h, 0]); 

    var vis = d3.select("body") 
    .data([data]) 
    .append("svg:svg") 
    .attr("width", w + p * 2) 
    .attr("height", h + p * 2) 
    .append("svg:g") 
    .attr("transform", "translate(" + p + "," + p + ")"); 

    var rules = vis.selectAll("g.rule") 
    .data(x.ticks(5)) 
    .enter().append("svg:g") 
    .attr("class", "rule"); 

    rules.append("svg:line") 
    .attr("x1", x) 
    .attr("x2", x) 
    .attr("y1", 0) 
    .attr("y2", h - 1); 

    rules.append("svg:line") 
    .attr("class", function(d) { return d ? null : "axis"; }) 
    .attr("y1", y) 
    .attr("y2", y) 
    .attr("x1", 0) 
    .attr("x2", w + 1); 

    rules.append("svg:text") 
    .attr("x", x) 
    .attr("y", h + 3) 
    .attr("dy", ".71em") 
    .attr("text-anchor", "middle") 
    .text(x.tickFormat(10)); 

    rules.append("svg:text") 
    .attr("y", y) 
    .attr("x", -3) 
    .attr("dy", ".35em") 
    .attr("text-anchor", "end") 
    .text(y.tickFormat(10)); 

    vis.append("svg:path") 
    .attr("class", "line") 
    .attr("d", d3.svg.line() 
    .x(function(d) { return x(d3.time.days(new Date(d.jsonDate))); }) 
    .y(function(d) { return y(d.jsonHitCount); })); 

    vis.selectAll("circle.line") 
    .data(data) 
    .enter().append("svg:circle") 
    .attr("class", "line") 
    .attr("cx", function(d) { return x(d3.time.days(new Date(d.jsonDate))); }) 
    .attr("cy", function(d) { return y(d.jsonHitCount); }) 
    .attr("r", 3.5); 
    }); 

JSON come stampato dalla mia azione:

[{"jsonDate":"09\/22\/11","jsonHitCount":2,"seriesKey":"Website Usage"},`{"jsonDate":"09\/26\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/27\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/29\/11","jsonHitCount":26,"seriesKey":"Website Usage"},{"jsonDate":"09\/30\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/03\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"10\/06\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/11\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/12\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/13\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/14\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"10\/17\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/18\/11","jsonHitCount":6,"seriesKey":"Website Usage"},{"jsonDate":"10\/19\/11","jsonHitCount":8,"seriesKey":"Website Usage"},{"jsonDate":"10\/20\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/21\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"10\/24\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/27\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/01\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/02\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/03\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/04\/11","jsonHitCount":37,"seriesKey":"Website Usage"},{"jsonDate":"11\/08\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/10\/11","jsonHitCount":39,"seriesKey":"Website Usage"},{"jsonDate":"11\/11\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/14\/11","jsonHitCount":15,"seriesKey":"Website Usage"},{"jsonDate":"11\/15\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/16\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"11\/17\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"11\/21\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/22\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/23\/11","jsonHitCount":11,"seriesKey":"Website Usage"},{"jsonDate":"11\/24\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/28\/11","jsonHitCount":10,"seriesKey":"Website Usage"},{"jsonDate":"11\/29\/11","jsonHitCount":3,"seriesKey":"Website Usage"}]` 

Answer 1

si sta cercando di utilizzare d3.scale.linear() per le date, e che non funzionerà. È necessario utilizzare invece d3.time.scale() (docs):

// helper function 
function getDate(d) { 
    return new Date(d.jsonDate); 
} 

// get max and min dates - this assumes data is sorted 
var minDate = getDate(data[0]), 
    maxDate = getDate(data[data.length-1]); 

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]); 

Quindi non c'è bisogno di trattare con le funzioni intervallo di tempo, si può semplicemente passare x una data:

.attr("d", d3.svg.line() 
    .x(function(d) { return x(getDate(d)) }) 
    .y(function(d) { return y(d.jsonHitCount) }) 
); 

violino Lavorare qui: http://jsfiddle.net/nrabinowitz/JTrnC/