綁定顏色數據，在d 3

我複製「甜甜圈倍數」（http://bl.ocks.org/mbostock/3888852）從D3庫用於不同目的例如：以顯示生物樣品的RNA測序是否通過某些質量控制測試。綁定顏色數據，在d 3

到目前爲止，我有這樣的代碼：http://tributary.io/inlet/5293726道歉的混亂。您可以看到的例子，該派有22個片，每個22個測試（對於那些有興趣，2x11測試每個測序讀數）。我知道這是不是想象此信息的最佳方式，而我計劃使用堆積條形圖或矩陣來顯示這個數據，但1這可以表明他們最初被收集在佈局中的生物樣品，在8×12格（不固定，需要調整您的瀏覽器）和2。這是我對現在和學習結合的色彩元素D3這個概念可以在圖表類型使用。

我的問題是這樣的：當我綁定數據時，與該元素相關的值現在爲100，並且我不能再訪問我爲單元格的每一行創建的其他對象，即d.test_colors，它具有與PASS，WARN，和FAIL對於每個22次測試相關聯的顏色。

這是我喜歡的工作線：

.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'; 
});

現在，它只是返回的淡藍色，但我想它返回22 test_colors之一，因此i用於遍歷陣列。

看着'甜甜圈倍數'的例子，他們做了一些綁定的顏色域的值，但我不知道如何將其集成到我的設置。

來源

2013-04-05 Olga Botvinnik

原來的伎倆是通過對象的列表中爲每個所需的「甜甜圈」的「切片」，並保持在該對象的顏色信息。

的關鍵代碼是在這裏：

var pie = d3.layout.pie() 
    .sort(null) 
    .value(function (d) { 
    return d.slice; 
}); 
... 
d.tests = [] 
... 
(in a for 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; 
});

工作例如：http://tributary.io/inlet/5332310

來源

2013-04-08 00:43:39

綁定顏色數據，在d 3

回答

相關問題