d3 Choropleth映射-正确的域/范围配置

Question

I am currently working on a d3 choropleth map. I am more specifically working to configure the scale based on incoming data. I have two middle data points expressing where to set the color separation.

For example, I have the domain of [0,1]. Color scale of 3 elements, ['#FF9489', '#FFED89', '#83F5A2'](red, yellow, green). The data point given to divide the colors properly are good_bound, bad_bound(green = good, red = bad). good_bound = 0.9, bad_bound = 0.8. I want the map to show bound(red) < 0.8, 0.8 <= bound(yellow) < 0.9, 0.9 < bound(green).

I am understanding that the range method called off of d3.scale.quantize(this is the method I am using instead of threshold) works off of the domain given and range specified, dividing it evenly.

options.color = ['#FF9489', '#FFED89', '#83F5A2']
var colorScale = d3.scale.threshold()
  .domain([1,0].concat())
  .range(options.color.concat().reverse().slice(0, 3))

Right now I am only able to get it to work by passing in the domain as [good_bound,bad_bound] and it ends up with a domain of .8 to .9, which is obviously not what is required. I was trying to figure out a way to override the d3.scale.range method but I am not understanding the structure.

The end correct result needs to be 0%-80% - red, 80%-90% - yellow, 90%-100% - green.

I am not sure what other code snippets I might need to include without it being irrelevant to the issue, please let me know and I can include it.

Answer 1

Scales domains aren't limited to two inputs. If you want to map ranges you just specify them out:

 var options = {}; options.color = ['red', 'yellow', 'green']; var colorScale = d3.scale.threshold() .domain([80,90,101]) .range(options.color); console.log('0 is red - ' + colorScale(0)); console.log('50 is red - ' + colorScale(50)); console.log('80 is yellow - ' + colorScale(80)); console.log('88 is yellow - ' + colorScale(88)); console.log('90 is green - ' + colorScale(90)); console.log('95 is green - ' + colorScale(95)); console.log('100 is green - ' + colorScale(100)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>