Question

如何通过使用d3.js为单色获得不同的颜色阴影？

例如：

colorScale('myId') => 'red'和colorScale(red)(10) => dark red和colorScale(red)(1) => light red。

Answer 1

使用d3 documentation中的d3.rgb.brighter(k)或d3.rgb.darker(k)。

例如：let red = d3.rgb("red")，它使红色的d3表示红色的rgb值（r = 255）。然后，red.darker(0.5)给出深红色（r = 213）：

let red = d3.rgb("red");
let darker = red.darker(0.5);
console.log(darker.toString())

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

注意：brighter和darker可以应用于其他类型的颜色（hsl，rgba等）

Answer 2

鉴于您对理想结果的描述，我非常怀疑您是否想要阴影：从技术上讲，阴影是给定颜色与黑色的混合，从而降低了亮度。

因此，假设您确实想要 shades ，则可以使用从"red"到"black"的简单线性比例并使用[0, 40]作为该任务来完成此任务。域（此处使用D3 v5.8新构造函数）：

const scale = d3.scaleLinear([0,40], ["red", "black"])

如果要更改某些值，也可以设置内插器，如gamma：

const scale = d3.scaleLinear([0,40], ["red", "black"])
    .interpolate(d3.interpolateRgb.gamma(1.9));

这是演示：

const scale = d3.scaleLinear([0, 40], ["red", "black"])
  .interpolate(d3.interpolateRgb.gamma(1.9));
d3.select("body").selectAll(null)
  .data(d3.range(41))
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 2px;
}

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

通过在域中使用更多不同的值，我们可以创建带有阴影的渐变（这只是一个演示，不要在创建渐变时附加500 div！）

const scale = d3.scaleLinear([0, 500], ["red", "black"])
  .interpolate(d3.interpolateRgb.gamma(1.9));
d3.select("body").selectAll(null)
  .data(d3.range(501))
  .enter()
  .append("div")
  .style("background-color", d => scale(d))

div {
  display: inline-block;
  width: 1px;
  height: 40px;
}

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

Answer 3

顶部评论效果很好，但是如果有人使用d3 v3，那么效果也不错。

var colors = d3.scale.linear().domain([0, 3]).range(["yellow", "red"]);
colors(0); // Yellow
colors(3); // Red

如何获得单一颜色的不同色调？

3 个答案: