score:0

I think it's useful to visualize how you're data is being formatted and "passed around":

d3.nest returns your data in this format:

[
   {key: "1 - attr selector", values: [
     {test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"},
     {test: "1 - attr selector", browser: "Firefox", time: 125, colour: "dd8e27"},
     ...
   ]},
   {key: "2 - attr qualified", values: [
     {test: "2 - attr qualified", browser: "Chrome", time: 64, colour: "fad009"},
     {test: "2 - attr qualified", browser: "Firefox", time: 132, colour: "dd8e27"},
     ....
   ]},
   ...
]

Then you have two subsequent calls to data: one in the svg definition and another one in the first code snippet you posted. After the first one the d element will be of the form

{key: "1 - attr selector", values: [
     {test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"},
     {test: "1 - attr selector", browser: "Firefox", time: 125, colour: "dd8e27"},
     ...
]}

And this is where you should call d.values.length to get the number of browsers for that specific test.

After the second call to data, where you do .data(function(d) {return d.values;}) each d element is in the form

{test: "1 - attr selector", browser: "Chrome", time: 65, colour: "fad009"}

And you see that at this point calling d.browser.length will return the length of the string with the browser name - not really what you want.

You have to get the number of browser before calling data for the second time, but you have to use it after calling it - that's the problem. You need to get the parent datum.
I hope I made the problem clear to you.

Talking about solutions, there are several. I'm not sure but d3.select(this.parentNode).datum().length or d3.select(this).node().parentNode.__data__.length or something similar instead of d.browser.length could work. Or you could remember the length in a variable (better, an array: each test could have a different number of browsers it was tested on) out of the selection and then use it.


Related Query

More Query from same tag