[英]d3js time format
I'm new to d3 so apologies is the question has an obvious answer. 我是d3的新手,很抱歉这个问题有一个明显的答案。 I'm trying to create a simple path with inputs as a json file something like that
我正在尝试创建一个简单的路径,将输入作为json文件之类的东西
var data = [{"date":"2012-10-22","debit":"150.00"},
{"date":"2012-10-29","debit":"1650.00"}, .....
and then I'm trying make the a scale 然后我试着做一个秤
var x = d3.time.scale()
.domain(d3.extent(data, function(d) { return (d.date); }))
.range([0, w]);
d3.extend returns the correct values but when I input this into the line and the path I get NaN. d3.extend返回正确的值,但是当我将其输入到行和路径中时,会得到NaN。 Following is my code
以下是我的代码
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));
and here is what I get on firebug 这是我在萤火虫上得到的
Error: Problem parsing d="MNaN,318.181818 ..........
Thanks 谢谢
The date in your JSON is not actually something that Javascript can deal with in a sensible way -- you need to parse it into date objects. JSON中的日期实际上并不是Java语言可以通过明智的方式处理的-您需要将其解析为日期对象。 d3 provides various functions for this (see the documentation ).
d3为此提供了各种功能(请参阅文档 )。 In your case, you'll need something like
就您而言,您需要
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)); })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.