How do I select a class dynamically in d3?

Question

I using the following code for my select function

quadrants = ["a", "b", "c", "d"];
for (var i in quadrants) 
{
    svgContainer.append("g").attr("class", quadrants[i]);
    var group = d3.select(function () {return "." + quadrants[i]});

    group.append("polygon");
    .....
}

This does not work since the value of group is 'function () {return "." + quadrants[i]'. How do I fix it so that group selects ".a", ".b" and so on?

Is it a typo or are you not closing the `{`? – Christopher Chiche Mar 04 '14 at 09:29 — Christopher Chiche, Mar 04 '14 at 09:29
Sorry thats a typo. Fixed. – user3370384 Mar 04 '14 at 09:37 — user3370384, Mar 04 '14 at 09:37

Christopher Chiche · Accepted Answer · 2014-03-04T09:45:24.320

1

You forgot to close the {

Also, you do not need to use a function, the following code works:

quadrants = ["a", "b", "c", "d"];
for (var i in quadrants) 
{
    //svgContainer.append("g").attr("class", quadrants[i]);
    var group = d3.selectAll('.'+quadrants[i]);
    group.text(function(){return i});
}

In fact using a function does not make sense. The role of the function would be to compute dynamically the selector from a variable. However there is nothing that gets passed to the function when using d3.select or d3.selectAll.

JsFiddle: http://jsfiddle.net/hTnJq/1/

edited Mar 04 '14 at 09:45

answered Mar 04 '14 at 09:34

Christopher Chiche

15,075
9
59
98

or `var group = d3.select('.' + quadrants[i]);` – Anto Jurković Mar 04 '14 at 09:39
Thank you so much... That solved it. Can you tell me why I can't use a function in select(). I am new to JS and D3 so this may be a noob question. – user3370384 Mar 04 '14 at 09:39
1

`select` will also work, but it will only select the first item of all corresponding to the selector. Which is not what you usually want with classes. For example: http://jsfiddle.net/hTnJq/2/ – Christopher Chiche Mar 04 '14 at 09:42

score 0 · Answer 2 · answered Mar 04 '14 at 18:25

It doesn't make sense to use a function in a d3.select or d3.selectAll statement because you don't have any elements yet to use as the source of the function's d and i values. You can only use a function for the select statement if it is a nested selection like selection.selectAll( function ), in which case the parent element's data and index values are used in the function.

However, there is also a much more elegant way to do what you're trying to do, by using d3 data joins:

quadrants = ["a", "b", "c", "d"];

var group = svgContainer.selectAll("g") //define a selection of <g> elements
               .data( quadrants ); //declare that you want one <g> 
                                   //for each value in quadrants

group.enter() //get the placeholder selection for the data objects
              //that don't have matching elements yet
     .append('g') //create the elements for each placeholder
     .attr("class", function(d,i) {
               //make the class a function of the data 
               //(which is the value from the quadrants array)
              return d;
          });

group.append("polygon");  //add a polygon to *each* <g> element

P.S. You might also find [this longer discussion on anonymous functions-as-parameters](http://stackoverflow.com/questions/21358027/how-are-input-parameters-filled-in-javascript-method-chains/21421101#21421101) to be useful. — AmeliaBR, Mar 04 '14 at 18:26

How do I select a class dynamically in d3?

2 Answers2