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），则颜色越接近左侧颜色（分别为右侧颜色）。
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>

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。

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

3 个答案: