D3 / JavaScript load data and return value

Question

I do not seem to understand why I cannot return the following values. I want to use custom colors for coloring a bar chart.

function farbe() {
  d3.csv("./Barchart_Farben.csv", function(data) {

    farbdat = new Array;
    for (var i = 0; i < data.length; i++) {
        farbdat.push(data[i].Farbe);
    }
      console.log(farbdat);
      return(farbdat);      
  });
  };

console.log(farbe());

Output:

undefined

Array(5) [ "yellow", "violet", "orange", "red", "lightyellow" ]

Nothing gets returned. Why?

// ./Barchart.csv: 
// Farbe 
// yellow
// violet
// orange
// red
// lightyellow

As I like to say, there are two types of programmers: *...and those who don't. Those who understand asynchronous code...* — Gerardo Furtado, Mar 01 '19 at 02:30
That's good. And please don't get offended by my joke, I never meant to be rude. I love that joke! I read it somewhere, I don't remember where, but it captures nicely the nature of an asynchronous code. — Gerardo Furtado, Mar 01 '19 at 08:32

Deepak gupta · Answer 1 · 2019-02-28T12:35:47.970

0

I guess d3.csv function doesn't return anything. Try this.

function farbe() {
  var returnData = [];
  d3.csv("./Barchart_Farben.csv", function(data) {

    farbdat = new Array;
    for (var i = 0; i < data.length; i++) {
      farbdat.push(data[i].Farbe);
    }
    console.log(farbdat);
    returnData = farbdat;
  });
 return returnData;
};

you must check typeof and undefined for input parameter 'data' before looping on it.

edited Feb 28 '19 at 12:35

answered Feb 28 '19 at 11:17

Deepak gupta

504
1
6
22

Please give me the reason for downvote. will help me to improve my skills :) – Deepak gupta Feb 28 '19 at 11:37
Thanks, but did not work. Typeof data ist object. – Krisselack Feb 28 '19 at 12:29
@Krisselack: now check it again. I have added the return in the function. – Deepak gupta Feb 28 '19 at 12:36
That returned an empty Array. – Krisselack Feb 28 '19 at 12:45
1

Just FYI: `d3.csv` always returns something, in any version (e.g. [here](https://stackoverflow.com/a/47664293/5768908)). On top of that your solution won't work, because `d3.csv` is asynchronous. – Gerardo Furtado Mar 01 '19 at 02:28
1

@Krisselack Use this link - https://stackoverflow.com/questions/13870265/read-csv-tsv-with-no-header-line-in-d3 – Deepak gupta Mar 01 '19 at 06:45
Thanks for the link! I'll try this out next time. Meanwhile I solved the issue by including the color column to my bargraph data set and I was able to access it in the main d3-function. – Krisselack Mar 01 '19 at 08:30

score -1 · Answer 2 · answered Feb 28 '19 at 11:07

-1

return is not a function, is a statement. You should write return farbdat instead of return(farbdat).

answered Feb 28 '19 at 11:07

brubs

1,259
8
23

Why the downvote? Please add a reason. – brubs Feb 28 '19 at 11:49
Thanks, but did not work. – Krisselack Feb 28 '19 at 12:30
2

Agreed, [`return`](https://www.ecma-international.org/ecma-262/9.0/index.html#prod-ReturnStatement) is a statement. But that statement returns the value of an expression following the `return` keyword. `(farbdat)`, on the other hand, is a perfectly fine expression which is basically the same as `farbdat` itself. Sure, it may look weird and it may be an indication that an inexperienced coder is off the track but the code is valid. The problem is a completely different one, namely asynchronous execution. – altocumulus Feb 28 '19 at 13:51
@altocumulus Cool, thanks for the explanation! I did not see that. – brubs Mar 01 '19 at 08:50

D3 / JavaScript load data and return value

2 Answers2