Javascript D3.js中的折线图-从JSON解析日期
对,所以我尝试从JSON源代码中绘制一个简单的折线图;但是我得到了一些错误,我不能找出 我的d3.json()请求应该返回:Javascript D3.js中的折线图-从JSON解析日期,javascript,json,parsing,svg,d3.js,Javascript,Json,Parsing,Svg,D3.js,对,所以我尝试从JSON源代码中绘制一个简单的折线图;但是我得到了一些错误,我不能找出 我的d3.json()请求应该返回: [{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.002946020989223022259
[{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.0029460209892230222598710528},....]
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = document.getElementById("chartArea").offsetWidth - margin.left - margin.right,
height = document.getElementById("chartArea").offsetHeight - margin.top - margin.bottom;
var parseDate = d3.time.format("%X");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.timestamp); })
.y(function (d) { return y(d.value); });
var svg = d3.select("#chartArea").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 + ")");
//var series = [];
d3.json("/cryptic/performance/benchmark/all", function (error, data) {
data.forEach(function (d) {
d.timestamp = parseDate((new Date(d.timestamp*1000)));
d.value = (+d.value) * 100;
//series.push([d.timestamp, d.value]);
});
x.domain(d3.extent(data, function (d) { return d.timestamp; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
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("Price ($)");
console.log(data[0])
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
Error: Problem parsing d="MNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNa....
这是我的绘图脚本:
[{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.0029460209892230222598710528},....]
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = document.getElementById("chartArea").offsetWidth - margin.left - margin.right,
height = document.getElementById("chartArea").offsetHeight - margin.top - margin.bottom;
var parseDate = d3.time.format("%X");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.timestamp); })
.y(function (d) { return y(d.value); });
var svg = d3.select("#chartArea").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 + ")");
//var series = [];
d3.json("/cryptic/performance/benchmark/all", function (error, data) {
data.forEach(function (d) {
d.timestamp = parseDate((new Date(d.timestamp*1000)));
d.value = (+d.value) * 100;
//series.push([d.timestamp, d.value]);
});
x.domain(d3.extent(data, function (d) { return d.timestamp; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
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("Price ($)");
console.log(data[0])
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
Error: Problem parsing d="MNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNa....
我收到的错误如下所示:
[{"timestamp":1399325270,"value":-0.0029460209892230222598710528},{"timestamp":1399325271,"value":-0.0029460209892230222598710528},{"timestamp":1399325279,"value":-0.0029460209892230222598710528},....]
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = document.getElementById("chartArea").offsetWidth - margin.left - margin.right,
height = document.getElementById("chartArea").offsetHeight - margin.top - margin.bottom;
var parseDate = d3.time.format("%X");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.timestamp); })
.y(function (d) { return y(d.value); });
var svg = d3.select("#chartArea").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 + ")");
//var series = [];
d3.json("/cryptic/performance/benchmark/all", function (error, data) {
data.forEach(function (d) {
d.timestamp = parseDate((new Date(d.timestamp*1000)));
d.value = (+d.value) * 100;
//series.push([d.timestamp, d.value]);
});
x.domain(d3.extent(data, function (d) { return d.timestamp; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
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("Price ($)");
console.log(data[0])
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
Error: Problem parsing d="MNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNaN,451.6363636363636LNa....
取决于数据的大小,但你明白了
非常感谢您的帮助,因为我已经开始撕头发了。要更改轴标签,请使用
axis.tickFormat()
--请参阅例如..您是否验证了正确解析日期?请注意,您不需要使用parseDate
,因为您已经在构建Date
对象了。@Larskothoff嗨,Lars,我一直在Chrome控制台中使用它。我尝试了parseDate、parseDate.format等的各种组合。。。当在chrome控制台中测试时,一些组合为我提供了正确的解析,但在运行应用程序时却没有。你知道在我的情况下需要什么吗?只要新日期(d.timestamp*1000)
就可以了。@Larskothoff谢谢,我会试试看,但是如果我希望x轴上的格式是%x呢?(即HH:mm:ss)?不解析,格式化轴标签。见例。