Accepted answer

As I briefly explained in the comments I'm not sure what is your goal with that cumbersome color function. Since you said that you're new to D3, here is an advice: don't do that, that's not the idiomatic D3. Get rid of that awful function, create an ordinal scale for each category and bob is your uncle.

However, addressing your specific function and trying to fix the code you have right now with minimal changes, you have to pass the index of each element to color...

.style("fill", function(d, i) { return color([key], i);})

...and then, using that index, you get the color inside the d3.schemeCategory20 array:

var fill = colorExtra[i];

Here is your updated bl.ocks:

Related Query

More Query from same tag