D3.js 热图颜色基于变量值而不是整体值 table

Question

我想创建一个热图，显示 heat/color 基于一个变量在所有组中的值，而不是在所有变量中的值。目前我有以下内容，其中颜色基于地图中所有值的值：

这就是为什么几乎所有东西都是黄色的原因，因为卢森堡的家庭净财富实在是太高了。我的矩形代码如下：

// Color Scale
var myColor = d3.scaleSequential()
    .interpolator(d3.interpolateViridis)
    .domain([d3.max(data, d=>d.value),d3.min(data, d=>d.value)]);

// add the squares
svg.selectAll()
    .data(data, function (d) { return d.Country + ':' + d.variable; })
    .enter()
    .append("rect")
    .attr("x", function (d) { return x(d.Country) })
    .attr("y", function (d) { return y(d.variable) })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("width", x.bandwidth())
    .attr("height", y.bandwidth())
    .style("fill", function (d) { return myColor(d.value) })
    .style("stroke-width", 4)
    .style("stroke", "none")
    .style("opacity", 0.8)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
}

我的数据是这样的长格式：

Country	Variable	Value
Australia	Var 1	Value 1
Australia	Var 2	Value 2
...	...	...
Australia	Var 24	Value 24
Austria	Var 1	Value 25
...	...	...
South Africa	Var 24	Value 960

您是否知道如何更改此设置以使其有效？我也可以转换数据。

非常感谢您的帮助，祝您周二愉快！

Answer 1

我通过添加两列更改了我提供给前端的数据：一列关于所有变量的最小值 groups/countries 和一列关于所有变量的最大值groups/countries。我的数据集现在看起来如下所示：

Country	Variable	Value	min	max
Australia	Var 1	Value 1	Min(Var1)	Max(Var1)
Australia	Var 2	Value 2	Min(Var2)	Max(Var2)
...	...	...	...	...
Australia	Var 24	Value 24	Min(Var24)	Max(Var24)
Austria	Var 1	Value 25	Min(Var1)	Max(Var1)
...	...	...	...	...
South Africa	Var 24	Value 960	Min(Var24)	Max(Var24)

通过包含一个根据当前变量的最小值和最大值给出颜色变量的函数，我将代码更改为以下内容：

//Color scale function
function colorPerVariable(minimun, maximum, value) {
        var myColor = d3.scaleSequential()
            .interpolator(d3.interpolateViridis)
            .domain([minimum, maximum]);
        return myColor(value);
}

// add the squares
    svg.selectAll()
        .data(data, function (d) { return d.Country + ':' + d.variable; })
        .enter()
        .append("rect")
        .attr("x", function (d) { return x(d.Country) })
        .attr("y", function (d) { return y(d.variable) })
        .attr("rx", 4)
        .attr("ry", 4)
        .attr("width", x.bandwidth())
        .attr("height", y.bandwidth())
//Changed part
        .style("fill", function (d) { return colorPerVariable(minimum = d.min, maximum = d.max, value = d.value) })
// 
        .style("stroke-width", 4)
        .style("stroke", "none")
        .style("opacity", 0.8)
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseleave", mouseleave)
}

D3.js 热图颜色基于变量值而不是整体值 table

D3.js Heatmap colors based on variable value instead of value for the whole table

javascript

data-visualization

colors

heatmap

d3.js