Json 在D3 js中设置没有时间的日期
我在做D3JS。 我是一名勒纳,正在尝试渲染多线图,但无法设置正确的日期格式。我想删除下午12点。例如4月12日下午02周三 下面是我的代码Json 在D3 js中设置没有时间的日期,json,d3.js,Json,D3.js,我在做D3JS。 我是一名勒纳,正在尝试渲染多线图,但无法设置正确的日期格式。我想删除下午12点。例如4月12日下午02周三 下面是我的代码 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.
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; });
//});
我的json数据
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 });
var List=newlist();
添加(新的{date=“20140401”,weekday=“163”,weekend=“263”});
添加(新的{date=“20140402”,weekday=“153”,weekend=“253”});
添加(新的{date=“20140403”,weekday=“133”,weekend=“233”});
添加(新的{date=“20140404”,weekday=“167”,weekend=“373”});
添加(新的{date=“20140405”,weekday=“123”,weekend=“183”});
添加(新的{date=“20140406”,weekday=“178”,weekend=“123”});
添加(新的{date=“20140407”,weekday=“32”,weekend=“223”});
返回Json(新的{ListWeekly=List});
您可以使用辅助对象设置时间格式,并使用轴方法设置轴的刻度标签格式。要将日期格式化为2014-04-30
,可以使用以下代码:
// 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); });
我已经试过了,但仍然不起作用。请建议你能写一个JSFIDLE吗?如果我能运行你的代码,我会更容易帮助你。