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

How to generate random colors in an specific range using D3?

本文关键字：范围内 随机 颜色 何使用 D3      更新时间：2023-09-26

我正在尝试使用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，把它做得越来越小，但我没有看到任何变化。如果有人能告诉我我可以用什么方法在特定范围内随机生成不同的颜色，我将不胜感激。

让我在这里尝试一些非常基本的东西。如果你想要一种介于蓝色和灰色之间的颜色，那么对于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函数就可以得到你想要的。

对于当前版本的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），颜色就越接近左边的颜色（分别为右边的颜色）。

  • d3.random随机选择0和1之间的值，以便从插值的颜色范围中随机选择颜色：

    d3.randomUniform()() // a value within [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>

如果选择ColorBrewer路线，只需加载库，然后引用其中的颜色即可：

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

这是@DanielSutantyo的小提琴，修改为使用ColorBrewer。

相关文章：