【发布时间】：2015-04-28 20:01:52
【问题描述】：
我正在尝试绘制 JSON 数据。我是 js 和 d3 的新手。我可以在 x 轴上格式化 ISO 8601 日期，但无法显示该行。 y 轴和 x 轴显示得很好。 我不断收到一条错误消息：“错误：属性 d="MNaN,-708.1292215027511LNaN 的值无效。” 我认为这个问题与将我的数据点绑定到轴有关。我想使用 x 轴上的日期和处理器作为我的 y 轴。
如果您有任何建议可以帮助我的线路（“路径”）出现，请告诉我。有关如何处理 ISO 8601 日期的任何解释也将非常有帮助。谢谢！！
<script>
//JSON data for graph
var data = [
{
"date": "2015-04-01T00:00:00",
"Logon": "1535.000000",
"ServerExport": "704.000000",
"Processor": "15.268909",
"AdminLogon": "1731.000000"
},
{
"date": "2015-04-01T00:10:00",
"Logon": "1995.000000",
"ServerExport": "630.000000",
"Processor": "15.585726",
"AdminLogon": "1951.000000"
},
{
"date": "2015-04-01T00:20:00",
"Logon": "1946.500000",
"ServerExport": "653.500000",
"Processor": "10.585794",
"AdminLogon": "1903.500000"
},
{
"date": "2015-04-01T00:30:00",
"Logon": "1851.500000",
"ServerExport": "650.500000",
"Processor": "5.999048",
"AdminLogon": "1830.000000"
},
{
"date": "2015-04-01T00:40:00",
"Logon": "1732.500000",
"ServerExport": "685.000000",
"Processor": "10.097523",
"AdminLogon": "1864.000000"
},
{
"date": "2015-04-01T00:50:00",
"Logon": "1622.000000",
"ServerExport": "664.500000",
"Processor": "7.387592",
"AdminLogon": "1757.000000"
},
{
"date": "2015-04-01T01:00:00",
"Logon": "995.000000",
"ServerExport": "508.500000",
"Processor": "8.683075",
"AdminLogon": "1438.000000"
},
{
"metricDate": "2015-04-01T01:10:00",
"Logon": "1416.666666",
"ServerExport": "723.000000",
"Processor": "12.205153",
"AdminLogon": "1721.500000"
},
{
"date": "2015-04-01T01:20:00",
"Logon": "1245.500000",
"ServerExport": "631.500000",
"Processor": "14.483815",
"AdminLogon": "1661.500000"
},
{
"date": "2015-04-01T01:30:00",
"Logon": "1162.500000",
"ServerExport": "593.500000",
"Processor": "19.331836",
"AdminLogon": "1642.500000"
},
{
"date": "2015-04-01T01:40:00",
"Logon": "1094.000000",
"ServerExport": "573.000000",
"Processor": "1.011995",
"AdminLogon": "1559.500000"
},
{
"date": "2015-04-01T01:50:00",
"Logon": "1054.000000",
"ServerExport": "542.500000",
"Processor": "11.102191",
"AdminLogon": "1460.000000"
},
{
"date": "2015-04-01T02:00:00",
"Logon": "955.500000",
"ServerExport": "1110.000000",
"Processor": "6.969313",
"AdminLogon": "6978.000000"
},
{
"date": "2015-04-01T02:10:00",
"Logon": "960.500000",
"ServerExport": "481.500000",
"Processor": "6.288052",
"AdminLogon": "1777.000000"
},
{
"date": "2015-04-01T02:20:00",
"Logon": "945.500000",
"ServerExport": "552.000000",
"Processor": "12.196932",
"AdminLogon": "2991.500000"
}]
//initializing dimensions of the visulisation
var vis = d3.select("#visualisation"),
WIDTH = 2000,
HEIGHT = 1000,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
}
//Defining time format
var timeFormat = d3.time.format('%Y-%m-%dT%H:%M:%S');
//Defining range for x. Defining range and domain for y
var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])//.domain([0, 20])
//Defining domain for x
x.domain([timeFormat.parse('2015-04-01T00:00:00'), timeFormat.parse('2015-04-01T02:20:00')])
//x.domain(d3.extent(data, function (d) { return d.metricDate; }));
y.domain([0, d3.max(data, function (d) { return d.Processor; })]);
//Define x axis
var xAxis = d3.svg.axis()
.scale(x)
.ticks(8)
.orient("bottom")
.tickFormat(d3.time.format("%Y-%m-%d% %H:%M:%S")); //<== insert the tickFormat function
//Define y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//Appending the axes to the svg
vis.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
.call(xAxis);
vis.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
//Define line
var lineGen = d3.svg.line()
.x(function (d) {
return x(d.metricDate);
})
.y(function (d) {
return y(d.Processor);
});
//Appending the line to the svg
vis.append('svg:path')
.attr('d', lineGen(data))
.attr('stroke', 'green')
.attr('stroke-width', 2)
.attr('fill', 'none');
</script>
【问题讨论】：
标签： javascript json d3.js