D3.js 如何为一种颜色获得不同深浅的颜色？

如何使用d3.js获得单色的不同色调

例如：

colorScale（'myId'）=>'red'

和

colorScale（red）（10）

=>

深红色

和

colorScale（red）（1）

=>

浅红色

使用

d3.rgb.亮（k）

或

d3.rgb.暗（k）

如下所示：

让red=d3.rgb（“red”）

，它将d3的rgb值表示为red（r=255）。然后，

红色。较深（0.5）

给出较深的红色（r=213）：

red=d3.rgb（“红色”）；
设暗=红。暗（0.5）；
console.log（深色的.toString（））

---

鉴于您对预期结果的描述，我高度怀疑您是否需要阴影：从技术上讲，阴影是给定颜色与黑色的混合，降低了其亮度

因此，假设您真的想要阴影，可以使用从

“红色”

到

“黑色”

的简单线性比例完成任务，并使用

[0,40]

作为域（此处使用D3 v5.8新构造函数）：

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

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

以下是演示：

const scale=d3.scaleLinear（[0,40]，“红色”，“黑色”]）
.插值（d3.插值伽马（1.9））；
d3.选择（“正文”）。选择全部（空）
.数据（d3.范围（41））
.输入（）
.附加（“div”）
.style（“背景色”，d=>scale（d））

div{
显示：内联块；
宽度：12px；
高度：12px；
右边距：2px；
}

---

最上面的注释工作得很完美，但是如果有人使用D3V3，那么这也可以

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

---

我创建了一个运行演示，这总是好的，我希望你不介意。

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