Question

我正在学习D3，并且正在尝试构建热图。我指的是：http://bl.ocks.org/ianyfchang/8119685

我有JSON格式的数据

var data=[{
        “id“:”0006ki01”,
        “exp1”:0.76,
        ”exp2”:0.56,
        ”exp3”:0.005,
        ”exp4”:0.007
},
{
        “id“:”0006ki02”,
        exp1”:0.006,
        ”exp2”:0.46,
        ”exp3”:0.003,
        ”exp4”:0.008
}
.
.
.

]

在x轴实验和y轴实验中，所有基因以及每个实验的值将确定细胞的颜色。

我该如何实现？

y轴上的基因ID，x轴上的实验，每个实验的值将确定每个单元格的颜色。

下面的代码绘制了热图的第一列（y属性的数据中每个对象的索引，x的数据为0），但是我该如何绘制我拥有的全部数据呢？

 var heatmap= svg.append("g") 
             .selectAll(".cell")
             .data(data)
             .enter()
             .append("rect")
             .attr("x",0)    //Here how can I get experiment index?
             .attr("y", function(d,i){ return i * cellSize;}
             .attr("width",cellSize)
             .attr("height",cellSize)
             .style("fill",function(d){ return colorScale(d.exp1)//This gets data from exp1 but how to get values for each experiment?

JSON数据的D3.js热图

0 个答案: