Javascript 无法获取显示在d3图表x轴上的日期
我对使用d3框架还不熟悉,我一直在胡思乱想中的一些例子。我有一个正在工作的JSFIDLE,其中有一小部分数据,但我似乎无法获得任何显示在x轴上的日期 你们谁能看到我遗漏了什么?非常感谢 jsFiddle: javascript:Javascript 无法获取显示在d3图表x轴上的日期,javascript,d3.js,charts,data-visualization,Javascript,D3.js,Charts,Data Visualization,我对使用d3框架还不熟悉,我一直在胡思乱想中的一些例子。我有一个正在工作的JSFIDLE,其中有一小部分数据,但我似乎无法获得任何显示在x轴上的日期 你们谁能看到我遗漏了什么?非常感谢 jsFiddle: javascript: var data = [ {'date': '130576320000000000', 'count': 3 }, {'date': '130567680000000000', 'count': 14 }, {'date': '
var data = [
{'date': '130576320000000000', 'count': 3 },
{'date': '130567680000000000', 'count': 14 },
{'date': '130565952000000000', 'count': 1 },
{'date': '130565088000000000', 'count': 9 },
{'date': '130564224000000000', 'count': 17 },
{'date': '130560768000000000', 'count': 13 },
{'date': '130553856000000000', 'count': 55 },
{'date': '130552992000000000', 'count': 8 },
{'date': '130552128000000000', 'count': 238 },
{'date': '130547808000000000', 'count': 14 },
{'date': '130541760000000000', 'count': 20 },
{'date': '130540896000000000', 'count': 6 },
{'date': '130536576000000000', 'count': 38 },
{'date': '130529664000000000', 'count': 44 },
{'date': '130528800000000000', 'count': 43 },
{'date': '130527936000000000', 'count': 3 },
{'date': '130525344000000000', 'count': 20 },
{'date': '130523616000000000', 'count': 4 },
{'date': '130519296000000000', 'count': 20 },
{'date': '130518432000000000', 'count': 3 },
];
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%m-%y").parse;
for(var i = 0; i < data; i++)
{
data[i].date = parseDate(data[i].date);
data[i].count = +data[i].count;
}
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.date); })
.y(function(d) { return y(d.count); });
var svg = d3.select("body")
.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 + ")");
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.count; }));
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", ".2em")
.style("text-anchor", "end")
.text("");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
您确定您的日期值有效吗?如果我将日期格式更改为2014-10-15,并将d3时间格式parse更改为d3.time.format%Y-%m-%d.parse;写入控制台的错误是,有一个无效值提供给path元素。不幸的是,这并没有告诉我脚本哪里出了问题。您的日期值在我看来也不有效。在for循环中,在i
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}