d3.js熱圖圖例

Question

我已經設法根據一些樣本基因表達數據生成了一個熱圖，並且我正在根據基因表達水平為每個細胞分配一個填充。 我將顏色填充映射到colorbrewer比例，即：

var z           = d3.scale.log().base(2).domain([min, max]).range([0,1]),
    fills       = colorbrewer.RdBu[6];
    heatmapFill = d3.scale.linear().domain(d3.range(0, 1, 1.0 / (fills.length - 1))).range(fills);

…對我來說完全正常。 但是，將這些填充分配給附帶的圖例時遇到了問題，圖例具有#NaNNaNNaN填充。

// Get data
svg.selectAll('.tile')
    .data(data.melted)
    .enter()
    .append('rect')
    .attr({
        'x': function(d) { return x(d.condition); },
        'y': function(d) { return y(d.geneID); },
        'fill': function(d) { return heatmapFill(z(d.value)); },
        'width': x.rangeBand(),
        'height': y.rangeBand()
    });
// Add a legend for the color values.
var legend = svg.selectAll(".legend")
    .data(z.ticks())
    .enter()
    .append("g")
        .attr({
            'class': 'legend',
            'transform': function(d, i) {
                return "translate(" + (i * 40) + "," + (height + margin.bottom - 40) + ")";
            }
        });

legend.append("rect")
.attr({
    'width': 40,
    'height': 20,
    'fill': z  // Problem likely to be arising from here
});

根據我的理解，似乎無法基於z的值獲取填充的值。

這是完整的小提琴： http : //jsfiddle.net/teddyrised/jLxbawhz/2/

---

如果我選擇不將表達式級別映射到colorbrewer比例上，而只是映射開始和結束顏色，則腳本可以正常工作（ http://jsfiddle.net/teddyrised/jLxbawhz/3/ ）：

// Scale
var z = d3.scale.log().base(2).domain([min, max]).range(['white','steelblue']);

// Get data
svg.selectAll('.tile')
    .data(data.melted)
    .enter()
    .append('rect')
    .attr({
        'x': function(d) { return x(d.condition); },
        'y': function(d) { return y(d.geneID); },
        'fill': function(d) { return z(d.value); },
        'width': x.rangeBand(),
        'height': y.rangeBand()
    });
// Add a legend for the color values.
var legend = svg.selectAll(".legend")
    .data(z.ticks())
    .enter()
    .append("g")
        .attr({
            'class': 'legend',
            'transform': function(d, i) {
                return "translate(" + (i * 40) + "," + (height + margin.bottom - 40) + ")";
            }
        });

legend.append("rect")
.attr({
    'width': 40,
    'height': 20,
    'fill': z
});

Answer 1

不確定我是否完全遵循您的代碼，但是您的圖例填充功能不應該與熱圖填充功能相同嗎？

legend.append("rect")
  .attr({
    'width': 40,
    'height': 20,
    'fill': function(d) { 
        return heatmapFill(z(d)); 
    }
});

更新小提琴 。