Тепловая карта D3.js для данных JSON - PullRequest
0 голосов
/ 31 августа 2018

Я изучаю 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, эксперименты по оси x, значения каждого эксперимента будут определять цвет каждой ячейки.

Ниже код рисует первый столбец тепловой карты (индекс каждого объекта в данных для атрибута y и 0 для x). Но как я могу нарисовать для всех данных, которые у меня есть?

 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?
...