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提供了更多，更顺畅的东西。另外，作为额外的奖励，我想使用颜色名称，而不是hexa代码。

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);

什么是亲颜色转换的专业方法？
是否有使用名称而不是hexa代码的工具？
如何制定动画更改？

Answer 1

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

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

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

＆＃34; RGB（255,255,255）＆＃34;
＆＃34; HSL（120,50％，20％）＆＃34;
＆＃34;＃ffeeaa＆＃34;
＆＃34;＃FEA＆＃34;
＆＃34; red＆＃34;，＆＃34; white＆＃34;，＆＃34; blue＆＃34;等

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

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

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

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

1 个答案: