d3.js dynamic style filling only displays black bar chart

Question

I have a bar chart and I'm trying to get it to have dynamic fill colours based upon a value, as follows:

svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("fill", function(d) {
            return "rgb(9,19," + (d.BALANCE / 10) + ")";
        })

The colour-changing code is taken directly from http://alignedleft.com/tutorials/d3/making-a-bar-chart/ and it works for him, so I'm mystified why it's showing up as black for me. In Firebug, bars show properties as follows:

<svg width="1140" height="300">
    <rect x="0" y="219.39428571428573" width="7.571428571428571" height="80.60571428571428" fill="rgb(9,19,70.53)">
...etc.
</svg>

...yet in the web page, they're completely black. Using the latest Firefox browser, if that matters.

Answer 1

For RGB values, you need integers, not fractions. Your 70.53 is an invalid value in this context. Use Math.round() to fix this:

.attr("fill", function(d) {
        return "rgb(9,19," + Math.round(d.BALANCE / 10) + ")";
    })