如何在d3中使用序数比例来返回月份名称

Question

我试图使用d3.scaleOrdinal（）为一组数据返回相应的monthNames。 月份由原始数据集中的1到12之间的整数提供，可在此处找到。 （我在每个基准对象的monthName字段中手动添加）

https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json

以下是我尝试创建比例的方法

var y = d3.scaleOrdinal().range([height, 0]).domain(month);
chart.selectAll('.temp')
       .data(monthlyData)
       .enter().append('rect')
       .attr('class', 'temp')
       .attr('x', function(d){
          return x(new Date(d.year, 0))
       })
       .attr('y', function(d){
          return y(d.monthName)
       })
       .attr('transform', 'translate(30, 0)')
       .attr('width', gridWidth)
       .attr('height', gridHeight)
       .attr('fill', function(d){
           return colorScale(d.variance + data.baseTemperature)
       });

但是，我得到一个非常奇怪的结果，我的数据被分成两个波段，一个在顶部，一个一直在底部，这可以在这个codepen中看到

http://codepen.io/redixhumayun/full/ZBgVax/

我该怎么做呢？

Answer 1

我认为你应该使用d3.scaleBand （而不是d3.scaleOrdinal ）， 就像这样 。

简单的有序规模要求其域和范围都是具有相同数量的离散元素的数组 - 然后比例将它们以1对1的方式相互映射。

相反，您需要一个将离散元素数组映射到连续范围的比例。 为此， 带尺度更合适。

或者，您可以确切地确定每个月应该显示的y值，并使用该数组作为序数比例的范围，但这基本上就是乐队规模在内部为您做的事情。