我目前正在制作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/