d3.js: How to access data in outer scope when using function(d) {...}

Question

Sorry for the weird title, but I'm not sure what these functions are called:

options: {
  someTrait: function(d) { return doSomething(d, outerScopeArray[i]); }
}

At first I thought they were anonymous functions but it's somehow expecting the first variable to be something. What this is called would be useful for me to look up more about it.

The problem I'm having though is that I want this function to access a variable in the outer scope. (outerScopeArray[i]) It's currently always undefined.

EDIT: this is how it's actually being called

  testDurations[i] // data here is accessible, this section is repeated multiple times in a loop

  $(newGraph).lineChart({

            options: {           
              tickFormat: function(d) { 
                //testDurations[i] here is undefined.
                console.log("testing durations", testDurations[i], "--", 10*60000)
                if (testDurations[i] <= 10*60000){
                  return d3.time.format('%H:%M:%S')(new Date(d)); 
                }
                else{
                  return d3.time.format('%H:%M')(new Date(d)); 
                }
              },

     });

They are called [closures](http://en.wikipedia.org/wiki/Closure_(computer_programming)). In this case, it is also an anonymous function. But, if I had to guess, I'd say your *real* problem is that `i` is undefined. — p.s.w.g, Jun 16 '14 at 18:33
Shouldn't they have access to the outer variable then? Adding in some more detail on how it's called. — user2483724, Jun 16 '14 at 18:34
If I had to guess, I'd say this is your problem http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — elclanrs, Jun 16 '14 at 18:35

score 0 · Answer 1 · answered Jun 16 '14 at 18:34

0

A little more code would be helpful (I'm not quite sure where you are using this), but if you are trying to access an array based on the index of the data element, you can use:

function(d,i) { return doSomething(d, outerScopeArray[i]); }

Here, i will contain the index of the current data element d.

answered Jun 16 '14 at 18:34

Bill

25,119
8
94
125

Yeah, so I can get d and i but I'd like to access "outerScopeArray", currently it's completely undefined. – user2483724 Jun 16 '14 at 18:41
In your current code, `i` is undefined. Did you fix that? You need to change the function definition to `function(d,i)`. – Bill Jun 16 '14 at 18:43
testDurations[i] should actually be a variable since i is defined in the outer for loop. Even if I used function(d,index) here, index wouldn't be needed anyway. – user2483724 Jun 16 '14 at 18:55

score 0 · Answer 2 · answered Jun 16 '14 at 19:12

I managed to freeze the value like so while still returning a function that fits d3.js' protocol.

//define this outside the for loop
var tickFormatFunction = function (v) {
     return function(d) { 
            console.log("testing durations",  v , "--", v)
            if (v >= 10*60000){
              return d3.time.format('%H:%M')(new Date(d)); 
            }
            else{
              return d3.time.format('%H:%M:%S')(new Date(d)); 
            }
    }
  }

//call like this
tickFormat: tickFormatFunction(testDurations[i]),

d3.js: How to access data in outer scope when using function(d) {...}

2 Answers2