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)
       });

然而，我得到一个非常奇怪的结果，我的数据被分成两个波段，一个在顶部，一个一直在底部，这可以在这个编码器中看到

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

我该怎么做？

Answer 1

我认为你应该使用d3.scaleBand（不是d3.scaleOrdinal），like this。

A plain ordinal scale期望其域和范围都是具有相同数量的离散元素的数组 - 然后比例将它们1对1地映射到彼此。

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

或者，您可以确切地计算出每个月应显示的y值，并将该数组用作您的序数范围，但是＆＃39 ; s本质上是一个乐队规模对你内部的影响。

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

1 个答案: