d3 svg矩形高度变为NaN

Question

I am unable to debug the reason why the rect height becomes NaN , with the embedded code below.

Instead , if I just have .attr("height",yScale.bandwidth()) , then I would see proper height in HTML elements.

The csv file is loaded properly , as I'm able to access the country and year properly.

If needed , I can upload the full code.

 var rHeight = function(d) { return d.ratio;}; //// data is of CSV format : //country,ratio,year //United States,0.33,1924 //United States,0.33,1928 //United States,0.33,1932 //United States,0.0,1936 //United States,0.17,1948 //United States,0.2,1952 //:: //:: // // draw rectangles svg.selectAll(".bar") .data(rpc_data) .enter() .append("rect") .attr("class","bar") .attr("x",xMap) .attr("y",yMap) .attr("width",xScale.bandwidth()) .attr("height",Math.floor((yScale.bandwidth())*rHeight) ); 

Answer 1

As we can see from your snippet rHeight it is a function, so when you run:

Math.floor((yScale.bandwidth())*rHeight

it is the same as number * function and you get NaN as result (check demo).

 console.log(1 * function() {}); 

You should calculate the height this way:

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