错误：<rect> 属性的值无效 width="NaN" 6d3.v3.min.js:1 错误：<text> 属性的值无效 x="NaN"答案

【问题标题】：Error: Invalid value for <rect> attribute width="NaN" 6d3.v3.min.js:1 Error: Invalid value for <text> attribute x="NaN"错误：<rect> 属性的值无效 width="NaN" 6d3.v3.min.js:1 错误：<text> 属性的值无效 x="NaN"
【发布时间】：2015-01-24 17:09:31
【问题描述】：

    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; });

您好，我是使用 D3 绘制图表的新手。现在我正在尝试来自 d3.com 的许多教程。现在我在尝试制作 svg 条形图时得到标题中显示的 2 个错误。有没有人可以帮助我？

【问题讨论】：

你得到的是“Not A Number”，很明显你是在用不是数字的变量做数学运算，比如barHeight ?
看来x(d) 定义不明确（不是数字）。您可能想要检查函数x（很可能是比例）和您正在输入的d（您绑定到对象的数据）。鉴于您的示例中提供的信息，答案是一个很长的问题，但是......
你在做 .attr("width", x) 也是 return x(d) - 3; 所以其中一个中的 x 一定是错误的
@adeneo 'var width = 420, barHeight = 20;'我的变量绝对应该是数字..
@PinguinDirk var x = d3.scale.linear().range([0, width]); 这就是我的 x 变量的样子..

标签： javascript svg d3.js bar-chart

【解决方案1】：

当我将宽度设置为NaN 时，我遇到了类似的问题。您需要检查您是否正确设置了 x 变量。尝试在此行上方粘贴console.log(x)：

.attr("width", x)

并在浏览器的开发工具中检查您的控制台。

【讨论】：