Line not following x os correctly & first tick isn't being shown

Question

See: http://jsfiddle.net/bQHjj/

Following the green line, the circles should be vertically aligned with my x axis, but all of them are moved a few pixels to the right.

The X axis isn't showing it's first tick, which should be 01.05.2013.

My x axis settings:

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

graph.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function (d) {
        return "rotate(-65)"
    });

Can anybody tell me what's wrong?

Answer 1

Your date parsing function is not correct, it seems to mess up time zones, since new Date(string) apparently assumes UTC. This will work:

var format = d3.time.format("%Y-%m-%d");
function getDate(d) {
    return format.parse(d.date);
}

cf the updated fiddle.