Question

我刚刚开始使用D3.js，我正在阅读：http://alignedleft.com/tutorials/d3

在创建条形图的部分中，作者给出了一个非常简单的示例，即使用循环中的当前数据来指定矩形填充颜色的RGB值。那非常有用。但是相当有限。

比如说 - 我有一种特定类型的图表，显示了各种数据优先级。因此，值越高，优先级越高。优先级可分为红色，橙色，黄色和绿色，分别为高，中，低，无。

在.attr('fill', function(d){})方法中使用switch case或if / else非常简单，如下所示：

.attr('fill', function(d) {
  if (percentage(d) <= 0.25) { // 0.25 is a percentage value representing the data
    return 'green';
  }
  else if (percentage(d) <= 0.50) {
    return 'yellow';
  }
  else if (percentage(d) <= 0.75) {
    return 'orange';
  }
  else if (percentage(d) <= 1) {
    return 'red';
  }
});

但是如果我想根据数据的强度动态改变颜色本身的强度/阴影怎么办？因此，它不仅具有基本的颜色值，而且可以通过在转换到下一种颜色之前根据数据的强度使颜色成为不同的阴影（或饱和度）来可视化该颜色范围内的数据强度。

我假设的一种方法是将每个百分比的两种策略结合起来，但这意味着我必须在我已经拥有的5个if语句中的每一个中嵌套25个if语句用于每个百分位表示数据。有没有更好，更有效的方法呢？

我知道我可以将每种颜色的阴影数限制为较小的数字 - 但我想看看除了嵌套条件之外是否还有其他方法可以做到这一点。

Answer 1

一种方法是使用d3.hsl，用3个参数构造一个颜色对象：色调，饱和度和等级。

您可以使用类似上面提议的开关语句来选择0到360之间的数字，该数字对应于所需的色调（绿色，黄色，橙色，红色）。

饱和度很可能是一个常数，可能在.5和1之间。你需要试验它并选择你喜欢的饱和度。

级别将是0到1之间的数字，但不能太接近0，因为它会产生黑色。此数字对应于您所代表的强度。越高越强 - 因此更亮 - 数量越多。您可以使用d3.scale.linear()将数据值转换为0到1范围。

构建hsl颜色对象后，在其上调用.rgb()，这就是您设置为svg形状的填充attr的内容。

特别是在D3.js中将数据转换为颜色

1 个答案: