Turn string to array name in D3 Javascript

Question

I want to enter the name of the data array as a variable, but for some reason it's not working for me.

so in the case it works:

 d3.select('#energychart').html("");

 d3.select('#energychart')
        .selectAll('svg')
        .data([week3])
        .enter()
        .append('svg')

But this case, it doesn't

     var x = "week3";
     d3.select('#energychart')
        .selectAll('svg')
        .data([x])
        .enter()
        .append('svg')

It acted as if there's no data entered. //// What happened: I got an empty chart //// What is supposed to happen: I see the data on the chart like in the case of .data([week3]) — 0black0rain, May 25 '15 at 00:38
Are you running both of these pieces of code together? In this case the previously added SVG is matched to the data and therefore not added. — Lars Kotthoff, May 25 '15 at 00:59

score 3 · Accepted Answer · edited May 23 '17 at 12:21

If I understand correctly you are trying to get the variable with name week3 by it's string name like in this question. If this is correct it has nothing to do with d3 as far as I know.

I would suggest this. (where variable with name "week3" is a pre-defined global variable.)

var varName = "week3";
var x = window[varName];
d3.select('#energychart')
  .selectAll('svg')
    .data([x])
  .enter()
    .append('svg');

If week3 is not a global variable then you will have to set up a variables object like in this answer. Then you will have to replace the window object (which holds global variables) with the variables obj.

var variables = {
    "week3": [3,4,5,6,7] // array can be replace with any data you want as value
};

var varName = "week3";
var x = variables[varName];
d3.select('#energychart')
  .selectAll('svg')
    .data([x])
  .enter()
    .append('svg')

EDIT:

So as requested in the comments. Here is an explanation to how this works.

First thing you need to know is that window is just an object. The window object holds global variables. Running these two lines below in your browser console will show you that all global variables are stored on the window object.

var AADataSet = [1, 2, 3, 4, 5];

console.log(window);

There are different ways to get value from an object. I will show you three equivalent ways to get a property out of an object.

var result;
var obj = { foo: 1, Bar: 2, "foo bar": 3 };
var randomVarName = "Bar"; // notice the capital B in Bar is important since it was declared that way.

result = obj.foo; // result equals 1
result = obj[randomVarName]; // result equals 2
result = obj["foo bar"]; // result equals 3

Since window is an object and the variables are stored directly on the object and not nested inside. You can access AADataSet through window["AADataSet"] the string "AADataSet" could also be stored in a variable and then used e.g.

var varName = "AADataSet";
window[varName]

Thanks @John it worked, but can you explain the window[] thing you did ? — 0black0rain, May 25 '15 at 14:06
@0black0rain I added an edit with an explanation to accessing the window object. — John, May 25 '15 at 17:37

Turn string to array name in D3 Javascript

1 Answers1