Question

绝对疯狂地试图解决这个问题，应该在学校里更加努力学习！

我想要实现一些我认为很容易做到的事情，但很难理解它的术语。

我想根据2种设置中的1种选择来创建热图。

首先，如果我有5个国家，例如：

英国 - 10000
美国 - 5000
巴西 - 4000
德国 - 1000
中国 - 500

我正在根据排名尝试着色。例如，如果我有红色，黄色，绿色，蓝色和紫色，那么以下情况就是如此：

UK = Red，USA = Yellow，Brazil = Green，Germany = Blue，China = Purple。

其次，我想在值上着色它们，所以在这种情况下应用以下内容：

UK = Red，USA = Green，Brazil = Greeny Blue，Germany = Bluey Purple，China = Purple。

但是我绝对不知道这是一个线性的，有序的，分位数的还是你有什么！

我已阅读说明，看起来Domain是输入，Range是输出。

我有以下代码：

 var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
 var heatmapColour = d3.scale.linear().domain([0, sortedArray.length]).range(colours);

在那个例子中，对于'排名'，我希望每个heatMapColour返回红色，黄色，绿色，蓝色和紫色，但我得到5种颜色，从红色（第一个位置）到黄色（最后一个位置）。 / p>

任何指针？

修改

作为一个例子，这“几乎可以正常运作”。

var colours = ['#FF0000', '#FFFF00', '#00FF00', '#0000FF', '#FF00FF'];
var heatmapColour = d3.scale.quantize().domain([0, sortedArray.length-1]).range(colours);

如果我的数组有5个项目，它会为每个项目生成一种颜色的结果，但如果我的数组中有10个项目，我有2个红色，2个黄色，2个绿色等，而不是红色，红色 - > ;橙色，橙色 - >黄色等。

同样，如果我在阵列中有3个项目，我会得到红色，绿色，紫色，然后什么也没有。没有意义！

Answer 1

为此我喜欢使用RainbowVis.js [https://github.com/anomal/RainbowVis-JS]将数值映射到颜色：

类似的东西：

var rainbow = new Rainbow();
rainbow.setSpectrum('green', 'red');
rainbow.setNumberRange(minValue, maxCalue);
return rainbow.colourAt(CountryValue);

您可以为渐变添加更多颜色

Answer 2

仍然不确定我理解，但听起来你想要一个分位数比例：

var x = d3.scale.quantile()
  .domain([0,500,1000,4000,5000,10000])
  .range(["#FF00FF", "#0000FF", "#00FF00", "#FFFF00", "#FF0000"]);

> x(400)
"#FF00FF"
> x(600)
"#0000FF"
> x(10001)
"#FF0000"

为d3创建两种不同类型的热图

2 个答案: