Error: Invalid value for <rect> attribute width=“NaN” 6d3.v3.min.js:1 Error: Invalid value for <text> attribute x=“NaN”

Question

    bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight - 1);

bar.append("text")
   .attr("x", function(d) { return x(d) - 3; })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function(d) { return d; });

Hi, I am new to charting with D3. Now I am trying out many tutorials from d3.com. Now I get the 2 errors displayed in the title when trying to make a svg bar chart. Is there anyone who could help me?

Answer 1

I ran into a similar problem when I was setting my width with a value that was NaN . You need to check that you are setting the x variable correctly. Try pasting console.log(x) above this line:

.attr("width", x)

and checking your console in your browser's dev tools.