d3.js Gamme de couleurs pour carte ne pas afficher selon gamme de domaine

Question

Ce que je suis en train de gamme de couleurs pour ma carte

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

Mes valeurs dans les données que j'ai mis dans le domaine ne dépasse pas 1000, donc je a donné la gamme de domaine de 1 à 1000 sur le réglage de cette gamme, il n'affiche pas la couleur comme prévu, comme je veux montrer ma carte avec des couleurs comme domaine gamme [1,50] -> vert & [51,250] -> jaune, [251,700 ] -> vert foncé & [701,1000] -> jaune Comment puis-je faire cela? Des idées?

Answer 1

Dans une échelle de seuil, si la plage a N valeurs, le domaine doit avoir N - 1 valeurs.

Par conséquent, il suffit de dire l'échelle exactement ce que vous nous avez dit dans la question:

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

Voici une démonstration de base, passez la souris sur chaque rectangle pour voir sa valeur:

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>