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>