D3 Bar Chart Project Blocking at User Story 11 TypeError: Cannot read property 'length' of null

General
1

I’ve been blocked by this challenge for days that I can’t figure out what’s wrong with my code, My pen https://codepen.io/frankrui/pen/pZpmGP

The test reports,

  1. The data-gdp attribute and its corresponding bar element should align with the corresponding value on the y-axis.
TypeError: Cannot read property 'length' of null
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:45:83400
    at NodeList.forEach (<anonymous>)
    at t.areShapesAlignedWithTicks (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:45:83275)
    at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:147:260669)
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852)
    at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853)
    at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000

Similar to this issue https://github.com/freeCodeCamp/testable-projects-fcc/issues/455

To test it, I’ve offset my y-axis. i.e. 900 in x direction, as shown in screenshoot below, that my tick align perfectly with the bar.

image
image612×570 2.77 KB

3

Strangely, by reversing not the domain, but the range.

The test actually passed.

4

Thank you! I was getting the same error with the D3 Heat Map project.

I reversed the range instead of my months array and it is now passing.

5

hello,
i know this is kind of old. but how did you solve it without reversing the domain?
i am stuck here too.
thank you very much

6

Try using Band Scales to draw bar charts could avoid this issue completely.