如何使用d3量程？

Question

d3是否可以使用自定義顏色範圍值爲對象着色？

我有兩個JSON： 一個是具有值：

[ 
    { 
    "area": "amsterdamn", 
    "KPIValue": 98.46 
    }, 
    { 
    "area": "brunei", 
    "KPIValue": 95.98 
    } 
] 

另一種是有範圍：

[ 
    { 
    "lowerRange": 0, 
    "upperRange": 90, 
    "sn": 1, 
    "color": "331fcf" 
    }, 
    { 
    "lowerRange": 90, 
    "upperRange": 100, 
    "sn": 2, 
    "color": "004F00" 
    } 
] 

如何填寫使用值的範圍使用顏色的路徑？

Answer 1

Quantile scales應該做的工作。

// define a variable thresholds as an array of threshold values 
// using the lower range 
var thresholds = range.map(function(rec) { return rec.lowerRange}) 

// define a variable colors as an array of color values 
var colors = range.map(function(rec) { return rec.color}) 

// define the scale 
var t = d3.scale.quantile().domain(thresholds).range(colors) 

// use it 
t(KPIValue) // returns the corresponding color 

這裏是一個working demo