如何根据d3.js中的索引指定颜色?

时间:2012-11-29 14:28:16

标签: svg d3.js

我正在尝试根据metricValue变量(整数)获取颜色,但下面的代码返回相同的颜色#1f77b4。我做错了什么?

function getColorForNode(d) {
    var p=d3.scale.category10();
    var metricValue = metrics.getScore(d.id)
    return(p(metricValue)); // Returns the same color independently of metricValue
}

1 个答案:

答案 0 :(得分:5)

这与没有为此序数规范指定域的事实有关。

确实,您不需要按照文档(https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_domain)中的说明为顺序标度指定域。在这种情况下,当您使用比例时,它将自动构建一个域。它在比例实例中跟踪该域。

问题在于,在您的情况下,您为每次调用getColorForNode创建一个新的缩放实例。所以,没有持久域。每次从头开始构建一个域,它将输出第一个范围值:#1f77b4。

所以,基本上有两种解决方案:

选项1:将比例实例构造保持在函数之外

var p = d3.scale.category10();
function getColorForNode(d) {
  var metricValue = metrics.getScore(d.id);
  return p(metricValue);
}

选项2:明确指定域

function getColorForNode(d) {
  var p = d3.scale.category10().domain(d3.range(10));
  var metricValue = metrics.getScore(d.id);
  return p(metricValue);
}