Question

我试图通过反复更改parseDate函数参数来解决此错误（“d3.min.js：1未捕获的TypeError：n.getFullYear不是函数”）但仍然没有结果。当我通过d解析日期时forEach函数日期中的.date变为null，这就是为什么在svg路径中它将'NaN'作为输入，导致没有绘制多系列折线图。

//JSON array called "somearray" is like this.Actual JSON Array is much bigger but just to show the problem i have given this much.
somearray = [{date: "2014-12-19 02:22:31",s0: 2,s1: 4,s2: 2},{date: "2015-05-03 12:10:32",s0: 5,s1: 5,s2: 1},{date: "2015-03-23 19:45:14",s0: 2,s1: 2,s2: 1},{date: "2015-06-02 22:58:35",s0:0,s1: 5,s2: 0}]

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { 
  font: 12px 
  Arial;
}
path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
.axis path,
.axis line {
  fill: none;
  stroke: black;
  stroke-width: 1;
  shape-rendering: crispEdges;
}
</style>
<body>
<!-- <script src="http://cdn.jsdelivr.net/alasql/0.2/alasql.min.js"></script>  -->
<!-- <! <script type="text/javascript" src="d3.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

// var margin = {top: 20, right: 80, bottom: 30, left: 50},
//     width = 960 - margin.left - margin.right,
//     height = 500 - margin.top - margin.bottom;

  //I want on Year month and Date thats why i have used "%Y-%m-%d"
var parseDate = d3.time.format("%Y-%m-%d");

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(7);

// Define the s0 line
var reviewline1 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.s0); });

//define the s1 line
var reviewline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.s1); });

//define the s2 line
var reviewline3 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.s2); });

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 + ")");

//Making data structure which d3 understands[{}:{}]i.e.,array of objects 
d3.json("rest_json.json", function(data){
var obj1={};
console.log(data.review_detail);
data.review_detail.forEach(function(d) {
//d.date = parseDate(d.date);
sentiment=d.vk;
dDate = d.vf
if (obj1[dDate]==undefined)
{
  obj1[dDate]={"s0":0,"s1":0,"s2":0};
  obj1[dDate][sentiment]=1;

}
else
{
  obj1[dDate][sentiment]+=1;
};

});

console.log(obj1);
var somearray = [];
for (key in obj1){
var arrayObj = {};
  console.log(key);
  console.log(obj1[key].s1);
  console.log(obj1[key].s0);
  console.log(obj1[key].s2);
  arrayObj.date = key;
  arrayObj.s1 =  obj1[key].s1;
  arrayObj.s2 = obj1[key].s2;
  arrayObj.s0 = obj1[key].s0;
  somearray.push(arrayObj);

};
console.log(somearray);

// var res1 = alasql('SELECT id, SUM(s1) AS scor e FROM ? GROUP BY id',[dataArray ]);
somearray.forEach(function(d){

  // console.log(d.s0);
  d.date = parseDate(d.date);
  // console.log(d.date);
  d.s0 = +d.s0;
  d.s1 = +d.s1;
  d.s2 = +d.s2;
});
// Scale the range of the data
x.domain(d3.extent(somearray, function(d) { return d.date; }));
// y.domain([0, d3.max(somearray, function(d) { return d.s0; })]);
y.domain([0, d3.max(somearray, function(d) {
return Math.max(d.s0, d.s1, d.s2); })]);
console.log(somearray);

// Add the reviewline path.
svg.append("path")
.attr("class", "line")
.attr("d", reviewline1(somearray));

// Add the reviewline2 path.
svg.append("path")
.style("stroke", "red")
.attr("d", reviewline2(somearray));

// Add the reviewline3 path.
svg.append("path")
.style("stroke", "blue")
.attr("d", reviewline3(somearray));

// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
 });
</script>
</body>

enter image description here

Answer 1

使用

解决了这个问题

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

parseDate('2014-10-10 00:50:09');   //returns Fri Oct 10 2014 00:50:09 GMT+0530 (IST)

d3.min.js：1未捕获TypeError：n.getFullYear不是函数

1 个答案: