javascript - 像老板一样根据数据在 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 channel ，乘以比率并再次重建字符串，如下所示。然而，我有一种感觉，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