d3.js - 如何使用 d3.js 较深的颜色方法

Question

在这个codepen 中，我试图根据当前数据值使橙色变暗。以下代码使条形变为橙色。我正在使用 D3.js 版本 5。

entries.append("div").attr("class", "bar")
.style("width", d => barScale(d.distance) + "px")
.style("background-color", d3.color('orange'));

但这不起作用。以下方法是“Learn D3.js”的作者在他的书中使用的方法。

entries.append("div").attr("class", "bar")
.style("width", d => barScale(d.distance) + "px")
.style("background-color", d3.color('orange').darker(colorScale(d.distance)));

标签： d3.js

Answer 1

问题是语法错误：

的第二个参数selection.style应该是一个函数。

更正的代码：

.style("background-color", d => d3.color('orange').darker(colorScale(d.distance)))