set date without time in D3 js - json

Question

I am working on D3 js.
I am a Lerner and trying to render the multi line graph but i am not able to set proper date format.i wanted to remove 12 PM .example like April 12 PM Wed 02
below is my code
var margin = { top: 40, right: 40, bottom: 35, left: 85 },
width = 800 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.request); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//d3.tsv("data.tsv", function (error, data) {
color.domain(d3.keys(data.ListWeekly[0]).filter(function (key) { return key !== "date"; }));
data.ListWeekly.forEach(function (d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function (name) {
return {
name: name,
values: data.ListWeekly.map(function (d) {
return { date: d.date, request: +d[name] };
})
};
});
x.domain(d3.extent(data.ListWeekly, function (d) { return d.date; }));
y.domain([
d3.min(cities, function (c) { return d3.min(c.values, function (v) { return v.request; }); }),
d3.max(cities, function (c) { return d3.max(c.values, function (v) { return v.request; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Request");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function (d) { return line(d.values); })
.style("stroke", function (d) { return color(d.name); });
city.append("text")
.datum(function (d) { return { name: d.name, value: d.values[d.values.length - 1] }; })
.attr("transform", function (d) { return "translate(" + x(d.value.date) + "," + y(d.value.request) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) { return d.name; });
//});
my json data
var List = new List<object>();
List.Add(new { date = "20140401", weekday = "163", weekend = "263" });
List.Add(new { date = "20140402", weekday = "153", weekend = "253" });
List.Add(new { date = "20140403", weekday = "133", weekend = "233" });
List.Add(new { date = "20140404", weekday = "167", weekend = "373" });
List.Add(new { date = "20140405", weekday = "123", weekend = "183" });
List.Add(new { date = "20140406", weekday = "178", weekend = "123" });
List.Add(new { date = "20140407", weekday = "32", weekend = "223" });
return Json(new { ListWeekly = List });

Answer 1

You can set the time format using the d3.time.format helper and set the format of the tick labels of the axis using the axis tickFormat method. To have the dates formatted as 2014-04-30, you can use the following code:
// Create a time format generator
var dateFmt = d3.time.format('%Y-%m-%d'); // 2014-04-30
// The dateFmt function returns a string with the formatted date
console.log(dateFmt(new Date('2014/04/04')); // 2014-04-04
// Set the tick format for the xAxis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) { return dateFmt(d.date); });