像老板一样根据数据在 D3 中设置颜色

Question

我创建了一组在新数据输入时重新着色的条形图。这个想法不仅通过它们的宽度而且通过它们的颜色来指示值。为方便起见，作为第一步，我选择了蓝色和红色（阈值 40 和 160 无关紧要），结果如下。

.style("background-color", function (d) {
  var low = 40;
  var high = 160;
  if (d < low) return "#0000ff";
  if (d > high) return "#ff0000";

  var ratio = (d - low) / (high - low);
  return "#" + Math.round(255 * ratio).toString(16)
    + "00" + Math.round(255 * (1 - ratio)).toString(16);
})

虽然它有效，但我意识到它会带来维护问题。如果我突然想从绿色变为黄色，我需要更改相当多的计算。并且尝试不同的颜色组将变成乏味且耗时的反乐趣。

一定有一种更像老板的方式吗？

我可以想到诸如声明极端颜色，将它们解析为单独的 RGB 通道，乘以比率并再次重建字符串，如下所示。但是，我感觉 D3 提供的东西比这要流畅得多。另外，作为额外的奖励，我想使用颜色名称，而不是十六进制代码。

var color = "#abcdef";
var ratio = 0.7;

var oldRed = color.substring(1,3);
var tmpRed = Math.round(parseInt(oldRed,16) * ratio);
var newRed = newRed.toString(16);

1. 什么是专业的颜色转换方法？
2. 是否有使用名称而不是十六进制代码的工具？
3. 应如何制定才能使动态变化成为可能？

Answer 1

您可以使用插值器解决 1) 和 2)：

var red = d3.rgb("red")
var blue = d3.rgb("blue")
return d3.interpolate(red, blue)(my_factor)

wiki 还列出了创建 rgb 对象的各种可能性：

• "rgb(255,255,255)"
• "hsl(120,50%,20%)"
• “#ffeeaa”
• “#fea”
• “红”、“白”、“蓝”等

对于 3)，可以使用转场，例如：

my_obj
   .style("fill", start_color)
   .transition()
   .attr("fill", end_color)
   .duration(1000)

请参阅：D3 Wiki - interpolators、D3 Wiki - colors 和 Creating transitions with d3