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

我目前正在制作d3弦图。我更具体地工作是根据传入数据配置比例。
我有两个中间数据点，表示在何处设置分色。

例如，我的域为[0,1]。 3个元素的色阶，['＃FF9489'，'＃FFED89'，'＃83F5A2']（红色，黄色，绿色）。正确划分颜色的数据点是good_bound，bad_bound（绿色=良好，红色=不良）。 good_bound = 0.9，bad_bound = 0.8。我希望地图显示bound（红色）
我了解到，从d3.scale.quantize（这是我使用的方法，而不是阈值）中调用的范围方法在给定的域和指定的范围内工作，将其平均划分。

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

现在，我只能通过将域传入[good_bound，bad_bound]来使其正常工作，并且最终以.8到.9的域结尾，这显然不是必需的。我试图找出一种方法来覆盖d3.scale.range方法，但我不了解其结构。

最终正确结果需要为0％-80％-红色，80％-90％-黄色，90％-100％-绿色。

我不确定在与问题无关的情况下可能需要包括哪些其他代码片段，请让我知道，我可以包括在内。

最佳答案

Scales域不限于两个输入。如果要映射范围，只需将其指定出来即可：

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>

关于javascript - d3 Choropleth映射-正确的域/范围配置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35949514/