svg - 如何根据 d3.js 中的索引分配颜色？

Question

我正在尝试根据 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
}

Answer 1

这与没有为该序数标度指定域这一事实有关。

的确，您不需要按照文档 (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);
}