CODEWITHSUNDEEP
javascriptd3.js
ctlkkc
ctlkkc

Reputation: 57

d3.csvParse cannot read string correctly

I have a SVG to feed with CSV format data. I am using d3.js 4.13.0. I have encountered the such a problem:

my csv variable $ajax_data looks like this:

date,value
1524805006,1234
1524805012,1235
1524805018,1236
...

when I put the variable into the parse function: 

d3.csvParse(ajax_data, type, function(error, data){
  console.log(data);
  if (error) throw error;
  ...
  [more processing]
  });

My accessor function type is defined as below:

function type(d){
  d.date = parseDate(d.date);
  d.value = +d.value;
  return d;
}

var parseDate =d3.timeParse("%s");

When I execute the above parse function, there is nothing in response, not even from the console.log(data).

Not even if I turned the variable into a string:

d3.csvParse(JSON.stringify(ajax_data), type, function(error, data){
  console.log(data);
  if (error) throw error;
  ...
  [more processing]
  });

Still nothing in response...

Therefore I tested with the same data from $ajax_data and put into a csv plain file, and use the following parse method:

d3.csv("ajax_data.csv", type, function(error, data){
  console.log(data);
  if (error) throw error;
  ...
  [more processing]
  });

it worked without any problem and I have the full array:

[
  {date:xxxx,value:yyyy},
  {date:xxxx,value:yyyy},
  {date:xxxx,value:yyyy},
  ...
]

Can anyone who knows about d3.csvParse function tell me what is wrong?

Upvotes: 2

Views: 1202

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

Unlike d3.csv, d3.csvParse doesn't need a callback.

It accepts one, because this is JavaScript: a function can have more arguments than parameters or more parameters than arguments... your code doesn't throw any error because the additional argument — the callback — is just ignored.

So, it should be just:

var data = d3.csvParse(ajax_data, type);

console.log(data)

//more processing, etc...

Here is a demo with your code/data:

var ajax_data = `date,value
1524805006,1234
1524805012,1235
1524805018,1236`;

var parseDate = d3.timeParse("%s");

var data = d3.csvParse(ajax_data, type);

console.log(data)

function type(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
  return d;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

Upvotes: 2

Related Questions