javascript - d3 csv readin to objects in array - Stack Overflow

admin管理员组

文章数量:1026975

I am currently trying to use the d3 framework for a university visualisation approach. For testing purpose I want to read a csv-file and parse the rows to objects inside an array.

My csv looks like:

 ID, Referred To, TimeStamp, Votes, Comment

So I want to read it with the following lines:

d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});

But if I want to readout the values afterwards I am just getting "undefined" I also tried the way mbostock described in this thread: csv to array in d3.js

but working with a global variable is not working either.

var mentlist;
d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});
console.log(mentlist);

Am I understanding something wrong? Maybe you have a solution for me.

I am currently trying to use the d3 framework for a university visualisation approach. For testing purpose I want to read a csv-file and parse the rows to objects inside an array.

My csv looks like:

 ID, Referred To, TimeStamp, Votes, Comment

So I want to read it with the following lines:

d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});

But if I want to readout the values afterwards I am just getting "undefined" I also tried the way mbostock described in this thread: csv to array in d3.js

but working with a global variable is not working either.

var mentlist;
d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});
console.log(mentlist);

Am I understanding something wrong? Maybe you have a solution for me.

• javascript
• csv
• d3.js

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Jul 21, 2014 at 11:23 hGenhGen 2,28566 gold badges2626 silver badges4444 bronze badges 7

• Do you have spaces in your CSV like in the headers? Then remove those. Also I'm guessing converting "ment" to a number doesn't make sense. – Lars Kotthoff Commented Jul 21, 2014 at 12:54
• yes but just in the ment section, the Idea is a new visualisation of social network ments. So I wanted to store the ments inside of a csv, isnt that possible ? – hGen Commented Jul 21, 2014 at 12:57
• Sure, but your code is converting everything in the CSV into numbers, which doesn't make sense if you have strings in there. – Lars Kotthoff Commented Jul 21, 2014 at 13:05
• OkayI understand, which char do I have to use to convert to Strings? – hGen Commented Jul 21, 2014 at 13:13
• You're getting strings already, no need to convert. – Lars Kotthoff Commented Jul 21, 2014 at 13:15

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

var mentlist=[];
d3.csv("test_ments.csv", function(data) {
  mentlist=data;
});
console.log(mentlist);

What I know is, In the call back data object will contain array of JSON objects of csv file's all rows of data, that each row data is pushed as a JSON format into the data array. As below

[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}]

The call back function is called by passing the array of JSONs. So data object will look like

data=[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}];

Hope you understood...If not ask me.

I think the reason you got { console.log(mentlist) } undefined is that inside d3.csv the callback function is parsed and called last by browser, and { console.log(mentlist) } is called earlier even though it appears at the bottom of your code. So the moment when { console.log(mentlist) } is called, { mentlist } is actually undefined (only declared). That being said, just try putting { console.log(mentlist) } inside the callback and it should do the job.

I am currently trying to use the d3 framework for a university visualisation approach. For testing purpose I want to read a csv-file and parse the rows to objects inside an array.

My csv looks like:

 ID, Referred To, TimeStamp, Votes, Comment

So I want to read it with the following lines:

d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});

But if I want to readout the values afterwards I am just getting "undefined" I also tried the way mbostock described in this thread: csv to array in d3.js

but working with a global variable is not working either.

var mentlist;
d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});
console.log(mentlist);

Am I understanding something wrong? Maybe you have a solution for me.

I am currently trying to use the d3 framework for a university visualisation approach. For testing purpose I want to read a csv-file and parse the rows to objects inside an array.

My csv looks like:

 ID, Referred To, TimeStamp, Votes, Comment

So I want to read it with the following lines:

d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});

But if I want to readout the values afterwards I am just getting "undefined" I also tried the way mbostock described in this thread: csv to array in d3.js

but working with a global variable is not working either.

var mentlist;
d3.csv("test_ments.csv", function(data) {
  mentlist = data.map(function(d) {
    return[+d["ID"],
           +d["Referred To"],
           +d["TimeStamp"],
           +d["Votes"],
           +d["Comment"]
          ]
  });
});
console.log(mentlist);

Am I understanding something wrong? Maybe you have a solution for me.

• javascript
• csv
• d3.js

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Jul 21, 2014 at 11:23 hGenhGen 2,28566 gold badges2626 silver badges4444 bronze badges 7

• Do you have spaces in your CSV like in the headers? Then remove those. Also I'm guessing converting "ment" to a number doesn't make sense. – Lars Kotthoff Commented Jul 21, 2014 at 12:54
• yes but just in the ment section, the Idea is a new visualisation of social network ments. So I wanted to store the ments inside of a csv, isnt that possible ? – hGen Commented Jul 21, 2014 at 12:57
• Sure, but your code is converting everything in the CSV into numbers, which doesn't make sense if you have strings in there. – Lars Kotthoff Commented Jul 21, 2014 at 13:05
• OkayI understand, which char do I have to use to convert to Strings? – hGen Commented Jul 21, 2014 at 13:13
• You're getting strings already, no need to convert. – Lars Kotthoff Commented Jul 21, 2014 at 13:15

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

var mentlist=[];
d3.csv("test_ments.csv", function(data) {
  mentlist=data;
});
console.log(mentlist);

What I know is, In the call back data object will contain array of JSON objects of csv file's all rows of data, that each row data is pushed as a JSON format into the data array. As below

[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}]

The call back function is called by passing the array of JSONs. So data object will look like

data=[{"ID": valueFromtheRow, "Referred To": value, "TimeStamp": value, "Votes":value, "Comment":value}];

Hope you understood...If not ask me.

I think the reason you got { console.log(mentlist) } undefined is that inside d3.csv the callback function is parsed and called last by browser, and { console.log(mentlist) } is called earlier even though it appears at the bottom of your code. So the moment when { console.log(mentlist) } is called, { mentlist } is actually undefined (only declared). That being said, just try putting { console.log(mentlist) } inside the callback and it should do the job.

本文标签： javascriptd3 csv readin to objects in arrayStack Overflow