d3js时间格式
问题描述:
我是新来的d3,所以道歉是这个问题有一个明显的答案。我试图创建输入一个简单的路径作为JSON文件类似的东西d3js时间格式
var data = [{"date":"2012-10-22","debit":"150.00"},
{"date":"2012-10-29","debit":"1650.00"}, .....
,然后我试图让一个规模
var x = d3.time.scale()
.domain(d3.extent(data, function(d) { return (d.date); }))
.range([0, w]);
d3.extend返回正确的值,但当我输入这条线和我得到NaN的路径。下面是我的代码
var margin = {top: 20, right: 50, bottom: 30, left: 50},
w = 600 - margin.left - margin.right,
h = 400 - margin.top - margin.bottom,
barPadding = 3,
var debitMax = d3.max(data, function (d) { return + d.debit;});
var x = d3.time.scale()
.domain(d3.extent(data, function(d) { return (d.date); }))
.range([0, w]);
var y = d3.scale.linear()
.domain([0, debitMax])
.range([h, 0]);
var valueline = d3.svg.line()
.x(function(d) { return x((d.date)); })
.y(function(d) { return y(d.debit); })
.interpolate("basis");
var svgContainer = d3.select("div").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
var debitPath = svgContainer
.append("path")
.attr("d", valueline(data));
,这里是我所得到的萤火
Error: Problem parsing d="MNaN,318.181818 ..........
感谢
答
在你的JSON的日期是不实际的东西的JavaScript就可以以合理的方式处理 - - 你需要将它解析成日期对象。 d3为此提供了各种功能(请参见the documentation)。在你的情况,你需要像
var parseDate = d3.time.format("%Y-%m-%d").parse;
...
.domain(d3.extent(data, function(d) { return parseDate(d.date); }))
...
.x(function(d) { return x(parseDate(d.date)); })
感谢它的工作。 – ardms 2013-03-03 13:14:12