지도 도메인 범위에 따라 표시되지 컬러 범위를 d3.js

Question

내 맵이 어떻게 설정하고 색상 범위

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

I 1000을 초과하지 않는 도메인에서 설정 한 데이터 내 가치, 그래서 이 범위를 설정할 때 도메인 범위를 1에서 1000까지 지정했습니다. 범위가 [1,50] -> 초록색 & [51,250] -> 노란색, [251,700]과 같은 색상으로 내지도를 표시하려는 것과 같이 예상대로 색상을 표시하지 않습니다. ] -> 진한 녹색 & [701,1000] -> 노란색 어떻게 할 수 있습니까? 어떤 아이디어?

Answer 1

임계 값 눈금에서 범위에 N 값이 있으면 도메인에 N - 1 값이 있어야합니다.

따라서, 당신이 질문에 우리에게 말 했어요 정확히 규모 말해 :

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>

: 그 값을 보려면 각 사각형 위에 마우스를 올려, 여기

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

기본 데모입니다