问题描述
我的图表完全按预期工作,除了我的parseDate函数不想在x轴上给出正确的日期。我相信这是一个简单的事情。
目前我添加了d3.v2.min.js,没有任何额外的辅助库 - 我需要别的东西来得到d3.time.format()工作吗?
不解析日期,我的数据返回x轴:
.960 .965 .970 .975
p>
1960 1965 1970 1975
JSON的结构如下:
[{year:1959 ,average:315.97},
{year:1960,average:316.91},
{year:1961,average:317.64},
.etc
{year:2011,average:391.57}]
strong>带有//注释部分的代码为
< script&
var margin = {top:20,right:20,bottom:30,left:50},
width = 920 - margin.left - margin.right,
height = 500 - margin .top - margin.bottom;
// parseDate下列无效
var parseDate = d3.time.format(%Y)。parse;
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);
//数据导入格式
d3.json({{asset('js / data_co2.json')}},function(data){
// parseDate()无法在以下工作
Gives错误:Uncaught TypeError:Object 1959没有方法'substring'
data.forEach b $ b d.year = parseDate(d.year);
d.average = + d.average;
});
x.domain(d3.extent data(d){return d.year;});
y.domain([260,420]);
var area = d3.svg.area b $ b .x(function(d){return x(d.year);})
.y0(height)
。 };
var svg = d3.select(#co2)。append(svg)
.attr(width,width + margin.left + margin.right )
.attr(height,height + margin.top + margin.bottom)
.append(g)
.attr(transform,translate .left +,+ margin.top +);
svg.append(path)
.datum(data)
.attr ,area)
.attr(d,area);
svg.append(g)
.attr(class,x axis)
.attr(transform height +))
.call(xAxis);
svg.append(g)
.attr(class,y axis)
.call(yAxis)
.append )
.attr(transform,rotate(-90))
.attr(y,6)
.attr(dy,.71em)
.style(text-anchor,end)
.text(CO2 Levels(ppm)
});
< / script>
解决方案
parseDate
,函数prepared由d3,期望被传递一个字符串进行解析。您的年份是(适当的)数字,因此您需要将它们转换为字符串:
parseDate(String(d.year)); / code>
或
parseDate(d.year.toString ());
但是,请记住,同样的结果 - 一个Date对象 - p>
var date = new Date(d.year,0); //必需的0,用于一月
p>My chart is working completely as expected, except that my parseDate function doesn't want to give me correct dates on the x-axis. I'm sure this is something simple.
Currently I'm adding d3.v2.min.js, without any additional helper libraries - do I need something else to get d3.time.format() working?
Without parsing the date my data returns an x-axis with:
.960 .965 .970 .975
rather than
1960 1965 1970 1975
The JSON is structured like this:
[{"year":1959,"average":315.97}, {"year":1960,"average":316.91}, {"year":1961,"average":317.64}, ...etc {"year":2011,"average":391.57}]
The code with the // commented sections being the issue:
<script> var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 920 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
// parseDate below not working
var parseDate = d3.time.format("%Y").parse; 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"); // data taking format d3.json("{{ asset('js/data_co2.json') }}", function(data) {
// parseDate() not working below
Gives error: Uncaught TypeError: Object 1959 has no method 'substring'
data.forEach(function(d) { d.year = parseDate(d.year); d.average = +d.average; }); x.domain(d3.extent(data, function(d) { return d.year; })); y.domain([260, 420]); var area = d3.svg.area() .x(function(d) { return x(d.year); }) .y0(height) .y1(function(d) { return y(d.average); }); var svg = d3.select("#co2").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 + ")"); svg.append("path") .datum(data) .attr("class", "area") .attr("d", area); 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("CO2 Levels (ppm)"); }); </script>
解决方案
parseDate
, the function "prepared" by d3, expects to be passed a string for parsing. Your years are (appropriately) numbers, so you would need to convert them to strings:
parseDate(String(d.year));
or
parseDate(d.year.toString());
However, keep in mind that the same result – a Date object – could be achieved natively, like this:
var date = new Date(d.year, 0);// The required 0, is for January
这篇关于parseDate = d3.time.format(“%Y”)无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!