Séries temporelles non traçant

Question

J'ai un code assez simple pour tracer un graphique linéaire en série temporelle. L'échelle x est rendue correctement, mais la ligne n'est pas rendue.

Je suis assez sûr que la question que nous sommes confrontés ici est avec ma fonction de calcul de la valeur de l'axe x, mais je ne vois pas ce que je pourrais faire mal

Mon code pour le graphique est similaire à ceci:

var data = getData(); 
var graph; 
var line; 

function getData() { 
    var theDate = new Date(2012, 01, 01, 0, 0, 0, 0); 
    var arr = []; 
    for (var x = 0; x < 30; x++) { 
     arr.push([theDate.getTime(), rand(100)]); 
     theDate.setDate(theDate.getDate() + 1); 
    } 
    return arr; 
} 

function rand(max) { 
    return Math.floor(Math.random() * (max + 1)) 
} 

var m = [80, 80, 80, 80]; // margins 
var w = 1000 - m[1] - m[3]; // width 
var h = 400 - m[0] - m[2]; // height 

// pretty sure the issue is which this line 
var x = d3.time.scale().domain([new Date(data[0][0]), new Date(data[data.length - 1][0])]).range([0, w]); 
var y = d3.scale.linear().domain([0, 100]).range([h, 0]); 

line = d3.svg.line() 
      .x(function (d, i) { return x(new Date(d[0])); })  
      .y(function (d) { return y(d[1]); }) 
      .interpolate("linear") 

graph = d3.select("#graph").append("svg:svg") 
       .attr("width", w + m[1] + m[3]) 
       .attr("height", h + m[0] + m[2]) 
       .append("svg:g") 
       .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

var xAxis = d3.svg.axis().scale(x).ticks(d3.time.days, 1).tickFormat(d3.time.format("%d")); 

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

var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left"); 

graph.append("svg:g") 
      .attr("class", "y axis") 
      .attr("transform", "translate(0,0)") //positon of the y axis 
      .call(yAxisLeft); 

graph.append("svg:path") 
     .data([data]) 
     .attr("class", "line") 
     .attr("transform", "translate(" + x(1) + ")") 
     .attr("d", line) 
     .transition() 
     .duration(1500) 
     .ease("linear") 
     .attr("transform", "translate(" + x(0) + ")"); 

Answer 1

j'ai tout compris, en changeant

graph.append("svg:path") 
    .data([data]) 
    .attr("class", "line") 
    .attr("transform", "translate(" + x(1) + ")") 
    .attr("d", line) 
    .transition() 
    .duration(1500) 
    .ease("linear") 
    .attr("transform", "translate(" + x(0) + ")"); 

à

graph.append("svg:path") 
    .data([data]) 
    .attr("class", "line") 

travaillé.

Évidemment, ma transition pour l'axe x est incorrecte