parseDate = d3.time.format（“％Y”）无法正常工作

本文介绍了parseDate = d3.time.format（“％Y”）无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的图表完全按预期工作，除了我的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