1

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

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

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

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

.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';
  }
});

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

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

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

4

1 回答 1

3

一种方法是使用d3.hsl，根据 3 个参数构造颜色对象：色相、饱和度和色阶。

您可以使用类似于上面建议的 switch 语句来选择一个介于 0 到 360 之间的数字，对应于所需的色调（绿色、黄色、橙色、红色）。

饱和度很可能是一个常数，可能在 0.5 到 1 之间。您需要对其进行试验并选择您喜欢的饱和度。

级别将是一个介于 0 和 1 之间的数字，但不能太接近 0，因为那样会产生黑色。这个数字对应于你所代表的强度。越强烈，数字越高——因此越亮。您可以使用 ad3.scale.linear()将数据值转换为 0 到 1 范围内。

一旦你构造了 hsl 颜色对象，你.rgb()就调用它，这就是你设置为你的 svg 形状的填充属性。

于 2013-02-28T02:50:23.963 回答