Question

I have some pretty simple code to plot a time series line graph. The x-scale is rendered correctly, however the line is not being rendered.

I am pretty sure that the issue we are facing here is with my function for calculating the x axis value, but I can’t see what I might be doing wrong

My code for the graph is similar to this:

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

I figured it out, changing

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) + ")");

to

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

worked.

Obviously my transition for the x axis is incorrect