How to use nth even and odd selectors in .style() method of d3?

22 views
Skip to first unread message

Droid

unread,
Jun 13, 2017, 8:22:44 AM6/13/17
to d3-js
Hi all,

Below is the code for table rows having some .style 

                                        table.append("tr")
                                                .selectAll("td")
                                                .data(arr_sum_each)    //some array to make table rows
                                                .enter()
                                                .append("td")
                                                .style("color", "Blue")
                                                .style("background-color", "black)
                                                .style("background-color", function(d)
                                                {
                                                    if(i%2==0)
                                                    {
                                                        return "yellow";
                                                    }
                                                })
                                                .text(function(d){return d;});

I'm trying to set background color of table rows first, and then setting alternate rows' color in 3rd style tag. Not working....need help!!

+ can i use tr:nth-child(even/odd) inside .style()  ??

thanks in advance.

steve rickus

unread,
Jun 13, 2017, 9:41:09 AM6/13/17
to d3-js
It looks like you are not passing the index 'i' into your style function...

But instead of setting the background-color to black, then trying to override it for even rows, just return the modulo color indexed from an array:

var rowcolors = ["yellow", "black"]; // or more, if you really want to
. . .
   
.style("background-color", function (d, i) { return rowcolors[i%rowcolors.length]; })
. . .

But yes, i would try to use pure CSS to style the nth rows instead of D3. Just include the proper directives in the <style> section at the top of your page, and remove the .style() calls from this code...

Droid

unread,
Jun 15, 2017, 6:31:33 AM6/15/17
to d3-js
Thanx @steve .actually i has already figured out that index "i" problem after posting question.

but u approach helped me in some other way..thanx a lot.

Droid

unread,
Jun 15, 2017, 7:35:58 AM6/15/17
to d3-js
*had    ...lol...
Reply all
Reply to author
Forward
0 new messages