如何使用D3生成特定范围内的随机颜色？

Question

我正在尝试使用D3为我的气泡图中的气泡生成特定范围内的随机颜色。我希望颜色只在蓝色和灰色的范围内。为此，我尝试了以下代码：

var domainMax = 20;
var colorFn = d3.scale.linear()
        .domain([0, domainMax])
        .range(['blue', 'grey']);

var randomNum = Math.floor((Math.random() * domainMax));
var color = colorFn(randomNum);

我的问题是，这种方法生成的颜色大多彼此非常接近，其中一些是相同的。我使用了domainMax，让它变得越来越小，但我没有看到任何变化。如果有人能告诉我我可以用什么方法在特定范围内随机生成不同的颜色，我将不胜感激。

Answer 1

让我在这里尝试一些非常基本的东西。如果你想要一种介于蓝色和灰色之间的颜色，那么对于RGB值，你希望R和G相同，B大于两者。注意，如果R == G == B，你会得到不同的灰色阴影，所以要给这个灰色添加一个‘蓝色阴影’，你只需要增加B的值。

(相反，如果你降低B，你会得到不同色调的R+G，比如黄色)

例如

function getColor(inputValue){
  r = 120;
  b = 120 + (d * 7) % (256-r)
  return 'rgb(' + r + ',' + r + ',' + b + ')' 
}

这里有一个小提琴：http://jsfiddle.net/pt3seenj/

R和G的值越高，蓝色越亮。无论如何，您只需要使用getColor函数就可以得到您想要的东西。

Answer 2

在当前版本的d3中，可以使用：

• d3.interpolate获取两种颜色范围内的颜色：

d3.interpolate(d3.rgb(70,130,180)，d3.rgb(169,169,169))(0.5) // rgb(120,150,175)

该值(此处为0.5)介于0和1之间。它越接近0(分别为1)，颜色就越接近左侧颜色(分别为右侧color).

• d3.random )，以便从插值的颜色范围中随机拾取一个介于0和1之间的值：

D3.()() // 0，1内的值

结合在一起，插值和随机生成器提供了一种在2种颜色之间的颜色范围内随机选取颜色的方法：

d3.interpolate("steelblue", "darkgrey")(d3.randomUniform()())

例如：

​

var colors = d3.interpolate("steelblue", "darkgrey");
var steelblue = colors(0); console.log(steelblue);   // rgb(70, 130, 180)
var bluegrey = colors(0.5); console.log(bluegrey);   // rgb(120, 150, 175)

var colors = d3.interpolate(d3.rgb(70, 130, 180), d3.rgb(169, 169, 169));
var steelblue = colors(0.5); console.log(steelblue); // rgb(70, 130, 180)

var randombluegrey = colors(d3.randomUniform()());
console.log(randombluegrey);

<script src="https://d3js.org/d3.v5.min.js"></script>

​

它应用于一系列的圆圈，给出：

​

var nodes = Array(15).fill(0).map((_,i) => i+1);

var colors = d3.interpolate("steelblue", "darkgrey");

d3.select("svg").attr("width", 500).attr("height", 100)
  .selectAll("circle")
  .data(nodes).enter().append("circle")
    .style("fill", d => colors(d3.randomUniform()(d / 15)))
    .attr("cx", d => d*25)
    .attr("cy", d => 20)
    .attr("r",  d => 10);

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

​

Answer 3

如果您选择使用ColorBrewer路线，则只需加载library，然后引用其中的颜色：

if (i < 9)
    return colorbrewer.Blues['9'][i];
else
    return colorbrewer.Greys['9'][i-9];

这是@DanielSutantyo的fiddle modified to use ColorBrewer。