如何让单一颜色获得不同深浅的颜色？

Question

如何使用 d3.js 获得单色的不同深浅颜色？

例如：

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

Answer 1

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

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

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

如果您想更改某些值（如伽玛），您还可以设置插值器：

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

这是演示：

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

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))

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

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

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

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))