D3.js .rangeBands() возвращает 'undefined' только с последним значением?

Question

Новое в D3.js и пытается создать гистограмму с 275 наборами значений. Я использовал порядковый масштаб, чтобы расположить столбцы вдоль оси x, а последнее значение возвращает «undefined» и поэтому располагается полностью влево. Я не могу понять, почему, и как это исправить ...

Вот суть того, что у меня есть: https://gist.github.com/shawnparrotte/2e17c4914771f3ea5fe6

Функция между линиями 81-84, где она идет вниз, в частности, на линии 83 :

bands.range()[i] 

Спасибо, что посмотрели на это!

** Редактировать: Кажется, что порядковый масштаб возвратил только 274 значения, хотя я отправил ему массив из 275 значений ... см. Строки 70-73. Странный.

Answer 1

Когда вы делаете:

var yScale = d3.scale.linear() 
         .domain([0, maxGDP]) 
         .range([0, gHeight]); 

Это означает, что Ваша ось у основана на ввп.

Но когда вы делаете:

  // ordinal scale for the bar width 
     var bands = d3.scale.ordinal() 
          .domain(gdp)//this is strange! should be dates 
          .rangeBands([0, gWidth], .2); 

Это означает, что ваша ось х связана с ВВП, что странно!

Должно быть связано с датой.

  // ordinal scale for the bar width 
     var bands = d3.scale.ordinal() 
          .domain(dates) 
          .rangeBands([0, gWidth], .2); 

Это исправит вашу проблему.

Наконец:

Почему вы видите 274 rangebands, когда у вас есть 275!

var bands = d3.scale.ordinal() 
           .domain(gdp) 
           .rangeBands([0, gWidth], .2); 

причина есть 2 ввп что же и масштаб порядковые всегда будет давать уникальные rangebands таким образом, для 275 ввп вы получите 274 после получения уникального.

Однако вы должны рассмотреть домен x как даты.

Рабочий код here

Надеется, что это помогает!