que trata las fechas en el eje d3.js

Question

¿Cómo puedo hacer que mi línea eje x se base en la fecha en d3.js?

Estoy intentando aprender cómo usar d3.js. He estado buscando ejemplos que vienen con él y he intentado recrear el gráfico de líneas utilizando datos entregados por json. Puedo alimentar los datos en el gráfico de líneas, pero se supone que el eje x es una fecha en lugar de un número. El formato de fecha que estoy usando es MM/DD/YY, pero el gráfico traza todo en 0. Mis datos de json están bien, pero tengo problemas para descubrir cómo trazar las coordenadas x. Esto fue tomado directamente de la línea.js que viene en la carpeta de ejemplos de d3.js cuando se descarga. La parte de la fecha no funciona. Espero que alguien pueda señalarme un ejemplo o ser capaz de explicar cómo puedo hacerlo funcionar.

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 como impresos por mi acción:

[{"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

usted está tratando de utilizar d3.scale.linear() para las fechas, y que no va a funcionar. Es necesario utilizar d3.time.scale() lugar (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]); 

Entonces no es necesario para hacer frente a las funciones de intervalo de tiempo, sólo puede pasar una fecha x:

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

violín Trabajar aquí: http://jsfiddle.net/nrabinowitz/JTrnC/