d3.js色彩範圍的地圖不顯示爲每個域範圍

Question

這怎麼我設置的顏色範圍爲地圖

var color = d3.scaleThreshold() 
    .domain([1,1000]) 
    .range(d3.schemeCategory20b); 

我的數據值，我在域已設置不超過1000，所以我已設定範圍從1到1000設置此範圍它不顯示顏色如預期，就像我想顯示我的地圖，像域名 範圍[1,50] - >綠色& [51,250] - >黃色，[251,700 ] - >深綠色& [701,1000] - >黃色 我該怎麼做？有任何想法嗎？

Answer 1

在閾值範圍內，如果範圍具有N個值，則該域必須具有N-1個值。

因此，只要告訴正是你已經告訴我們，問題的規模：

var color = d3.scaleThreshold() 
    .domain([50, 250, 700]) 
    .range(["green", "yellow", "darkgreen", "yellow"]); 

這是一個基本的演示，將鼠標懸停在每個矩形看到它的價值：

var body = d3.select("body"); 
 
var color = d3.scaleThreshold() 
 
    .domain([50, 250, 700]) 
 
    .range(["green", "yellow", "darkgreen", "yellow"]); 
 
body.selectAll(null) 
 
    .data(d3.range(51).map(d => d * 20)) 
 
    .enter() 
 
    .append("div") 
 
    .style("background-color", d => color(d)) 
 
    .on("mouseover", function(d) { 
 
    console.log("value: " + d + ", color: " + color(d)) 
 
    })

div { 
 
    min-width: 5px; 
 
    min-height: 20px; 
 
    display: inline-block; 
 
    margin: 1px; 
 
    border: 1px solid gray; 
 
} 
 

 
.as-console-wrapper { max-height: 30% !important;}

<script src="https://d3js.org/d3.v4.min.js"></script>