D3.js中SVG矩形高度出现NaN问题排查求助

你遇到的NaN问题核心原因很明确：你把函数rHeight直接和数值yScale.bandwidth()做乘法运算了，但rHeight本身是一个需要传入数据对象d才能返回具体数值的函数，不是现成的数值，这样的运算自然会得到NaN。

问题代码分析 #

看你这段有问题的代码：

.attr("height",Math.floor((yScale.bandwidth())*rHeight) );

你定义的rHeight是一个需要接收数据参数的函数：

var rHeight = function(d) { return d.ratio;};

直接把函数和数字相乘，相当于让一个函数与数值做运算，JS会把函数转换成字符串再尝试运算，结果必然是NaN。

修正后的写法 #

D3的.attr()方法支持传入一个函数作为参数，这个函数会自动接收当前数据对象d和索引i，你需要在这个函数里调用rHeight(d)来获取对应的ratio值，再和yScale.bandwidth()相乘：

.attr("height", function(d) {
  return Math.floor(yScale.bandwidth() * rHeight(d));
});

如果rHeight函数只在这里使用，也可以直接简化成：

.attr("height", function(d) {
  return Math.floor(yScale.bandwidth() * d.ratio);
});

这样每次绘制矩形时，都会根据当前数据的ratio值计算出正确的高度，就不会出现NaN了。

内容的提问来源于stack exchange，提问作者sus