我是d3的新手,所以道歉是问题有一个明显的答案。我正在尝试使用输入创建一个简单的路径作为类似的
的json文件 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 ..........
由于
答案 0 :(得分:0)
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)); })