javascript - Simple line graph with dates in D3 -

i'm trying grips d3 , want draw demo of simple line graph 7 days along x-axis. far have http://jsfiddle.net/wrdxt/1/

// define resolution var width = 500; var height = 250;      // create svg 'canvas' var svg = d3.select("body")     .append("svg")     .attr("viewbox", "0 0 " + width + " " + height)  // data var dataset = [     { date: new date(2013, 17, 1), value: 1 },     { date: new date(2013, 17, 2), value: 2 },     { date: new date(2013, 17, 3), value: 3 },     { date: new date(2013, 17, 4), value: 4 },     { date: new date(2013, 17, 5), value: 5 },     { date: new date(2013, 17, 6), value: 6 },     { date: new date(2013, 17, 7), value: 7 } ];  // define padding around graph var padding = 50;  // set scales  var mindate = d3.min(dataset, function(d) { return d.date; }); mindate.setdate(mindate.getdate() - 1); var maxdate = d3.max(dataset, function(d) { return d.date; });  var xscale = d3.scale.linear()     .domain([mindate, maxdate])     .range([padding, width - padding]);  var yscale = d3.scale.linear()     .domain([0, d3.max(dataset, function(d) { return d.value; })])     .range([height - padding, padding]);  // x-axis var xaxis = d3.svg.axis()     .scale(xscale)     .orient("bottom")     .tickformat("todo")     .ticksize(5, 5, 0)  svg.append("g")     .attr("class", "axis x-axis")     .attr("transform", "translate(0," + (height - padding) + ")")     .call(xaxis);  // y-axis var yaxis = d3.svg.axis()     .scale(yscale)     .orient("left")     .tickformat(function (d) { return d; })     .ticksize(5, 5, 0)     .ticks(5); // set rough # of ticks  svg.append("g")     .attr("class", "axis y-axis")     .attr("transform", "translate(" + padding + ",0)")     .call(yaxis);  // scatter plot svg.selectall("circle")     .data(dataset)     .enter()     .append("circle")     .attr("class", "data-point")     .attr("cx", function(d) {         return xscale(d.date);     })     .attr("cy", function(d) {         return yscale(d.value);     })     .attr("r", 5);  // line graph var line = d3.svg.line()     .x(function(d) {          return xscale(d.date);      })     .y(function(d) {          return yscale(d.value);      });  svg.append("svg:path").attr("d", line(dataset)); 

i'm stuck few things:

• how x-axis display 1 tick per day (i want each tick match data point , line it)
• the line graph bit filling in reason polygon?
• how format tick text on axis nicely it's "1 jul", "2 jul", etc
• how first date value appear on first tick rather y-axis - tried taking day off mindate, affected plot can see

i've updated jsfiddle want here. briefly did following:

• use time scale instead of linear scale. can specify d3.time.days, 1 ticks.
• a path filled default no stroke. see css i've added.
• use .tickformat function appropriate format.
• should fixed using time scale , appropriate tick spec.