Javascript 基于数据设置D3中的颜色，如boss

我已经创建了一组在输入新数据时重新存储的条。这个想法不仅是通过它们的宽度，而且还通过它们的颜色来表示它们的价值。为了简单起见，作为第一步，我选择了蓝色和红色（阈值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);
})

什么是专业的颜色变换方法

是否有一个工具可以使用名称而不是hexa代码

它应该如何制定以使动态变化成为可能

可以使用插值器求解1）和2）：

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

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

• “rgb（255255）”
• “hsl（120,50%，20%）”
• “#ffeeaa”
• “#fea”
• “红”、“白”、“蓝”等

对于3），可以使用过渡，例如：

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

---

见：，和

Aha！昨晚我在翻找插值器，但语法不对（我没想到第三行会有双括号）。很不错的！（3）怎么样？那是完全不同的作品吗？我不想排除这样做的机会……好吧，插值器返回一个函数对象，然后它本身就可以被调用，这会导致那些双括号：）

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