2016-12-30 7 views
3

d3.scaleOrdinal()を使用して、データセットに対応するmonthNamesを返そうとしています。この月は、元のデータセットの1から12までの整数で提供されます。 (私は手動で各データオブジェクトにmonthNameというフィールドで追加)d3で序数を使用して月の名前を返す方法

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/

に見ることができる2つのバンド、上部に1つ及び底部に1つのすべての方法、に分離されます

どうすればいいですか?

答えて

3

d3.scaleBandd3.scaleOrdinalではない)、like thisを使用する必要があります。

plain ordinal scaleは、ドメインと範囲の両方が、同じ数の離散要素を持つ配列であると想定しています。したがって、スケールは、1対1を互いにマップします。

離散的な要素の配列を連続した範囲にマップするスケールが必要です。そのためには、band scaleがより適しています。

また、あなた毎月に表示する必要があります正確に何y値でのエクササイズ、そしてあなたの順序尺度の範囲として、その配列を使用しますが、それはバンドのスケールは、内部でとにかくあなたのために何をするか、本質的だ可能性があります。

+1

ありがとうございます!それが魅力的でした。私はバンドスケールを使用して議論していましたが、私の月配列が数字ではなく文字列の配列であることを考慮して、d3がそれをマップするかどうかはわかりませんでした。それができることを知って良い! –

関連する問題