Trouble generating X-axis for bar chart

JavaScript
1

Tell us what’s happening:
Upon working the D3 bar chart project, I’m having trouble generating the X-axis. No axis or tick marks are being generated. I have it transitioned where I believe it should appear, but rather it just appears show a single number.

The code posted is referencing all the work associated with trying to create the X-axis.
I have my github linked to get a more comprehensive picture.

Your code so far

  let years = response.data.reduce(
    (accumulator, currentValue, i, array) => {
      let date = +new Date(currentValue[0]).getFullYear();
      if (accumulator.indexOf(date) === -1) {
        accumulator.push(date);
      }
      return accumulator
    }, []
  );

  let xScale = d3.scaleLinear()
                  .domain(d3.extent(years))
                  .range(0, svg_width - margin);

  let xAxis = d3.axisBottom(xScale);
  svg.append("g")
      .attr("transform", `translate(${margin}, ${svg_height - margin})`)
      .call(xAxis)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0.

Challenge: Add Labels to Scatter Plot Circles

Link to the challenge:

2

Hi @binnybit,

It would be easier for us to help you if you shared your code through CodePen for example. This way we can play around with your code and see what might be wrong :wink:

1 Like
3

The range method expects an argument of type Array.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.