0

我正在复制 d3 库中的“甜甜圈倍数”（http://bl.ocks.org/mbostock/3888852）示例，用于不同目的：显示生物样本的 RNA 测序是否通过了一些质量控制测试。

到目前为止，我有这个代码：http : //tributary.io/inlet/5293726 为它的混乱道歉。您可以从示例中看到，饼图有 22 个切片，22 个测试中的每一个切片（对于感兴趣的人，每个测序读取 2x11 测试）。我知道这不是可视化这些信息的最佳方式，我计划使用堆叠条形图或矩阵来显示这些数据，但是 1. 这可以在最初收集的布局中显示生物样本，在8x12 网格（不固定，需要调整浏览器大小）和 2. 这是我现在所拥有的，学习将颜色绑定到 d3 元素的概念可以跨图表类型使用。

我的问题是：当我绑定数据时，与该元素关联的值现在是 100，我无法再访问我为单元格的每一行创建的其他对象，即具有d.test_colors与关联的颜色PASS、、WARN以及FAIL22 项测试中的每一项。

这是我想要工作的行：

    .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，因此ifor 迭代数组。

查看“甜甜圈倍数”示例，他们将颜色域绑定到值，但我不确定如何将其集成到我的设置中。

4

1 回答 1

0

原来诀窍是为你想要的“甜甜圈”的每个“切片”传递一个对象列表，并在这个对象中保存颜色信息。

关键代码在这里：

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-08T00:43:39.773 回答