如何根據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); 
}