如何在 d3 中使用序数标度返回月份名称

Question

我正在尝试使用 d3.scaleOrdinal() 为一组数据返回相应的月份名称。月份由原始数据集中 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)
       });

然而，我得到了一个非常奇怪的结果，我的数据被分成两个带，一个在顶部，一个在底部，可以在这个代码笔中看到

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

我该怎么做呢？

Answer 1

我认为你应该像这样使用d3.scaleBand(not d3.scaleOrdinal) 。

一个普通的有序尺度期望它的域和范围都是具有相同数量的离散元素的数组——尺度然后将它们一对一地映射到彼此。

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

或者，您可以计算出y每个月应该显示的确切值，并使用该数组作为您的序数刻度范围，但这本质上是波段刻度在内部为您所做的。