javascript - Binding color to data in d3 -

i copying 'donut multiples' (http://bl.ocks.org/mbostock/3888852) example d3 gallery different purpose: show whether rna-sequencing of biological samples passed quality control tests.

so far have code: http://tributary.io/inlet/5293726 apologies messiness. can see example pie has 22 slices, 1 each of 22 tests (for interested, 2x11 tests each sequencing read). know isn't best way visualize information, , planning use stacked bar chart or matrix show data, 1. can show biological samples in layout collected, in 8x12 grid (not fixed, need resize browser) , 2. have now, , learning concept of binding colors d3 elements can used across chart types.

my problem this: when bind data, value associated element 100, , can no longer access other objects created each row of cell, namely d.test_colors, has colors associated pass, warn, , fail each of 22 tests.

this line work:

    .style('fill', function (d,i) {     console.log('in style fill: d', d)     //          console.log(d.reads.if_experiment); //    return d.data.test_colors[i];               return '#a6cee3';  }); 

right returns light blue color, want return 1 of 22 test_colors, hence i iterating on array.

looking @ 'donut multiples' example, binding of color domain values i'm not sure how integrate setup.

turns out trick pass list of objects each 'slice' of 'donut' want, , hold color information in object.

the key code here:

var pie = d3.layout.pie()     .sort(null)     .value(function (d) {     return d.slice; }); ... d.tests = [] ... (in loop)     d.tests.push({color: r1colors(d[test]), result: d[test],                          slice:100, test_name: test}); ... svg.selectall(".arc")     .data(function(d){       return pie(d.tests); })     .enter().append('path')     .attr('class', 'arc')     .attr('d', arc)     .style('fill', function (d,i) {     return d.data.color; }); 

working example: http://tributary.io/inlet/5332310