D3 Labels text amount slightly off <p>I'm having a problem with my D3 bar chart not displaying the correct amount for the label text. It seems like it's slightly off, and I'm not sure why.</p> <p>I'm trying to get the text labels to display whatever the newNumber is within the dataset.</p> <p>Here's the code I'm using:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code> var w = 800; var h = 600; var padding = 5; var maxNumber = 100; //Generate random numbers var dataset = []; for (var i = 0; i &lt; 21; i++) { var newNumber = Math.random() * maxNumber; dataset.push(newNumber); } var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([padding, w - padding], 0.05); var yScale = d3.scale.linear() .domain([d3.max(dataset), 0]) .range([padding, h - padding]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i) + padding; }) .attr("y", function(d) { return h - yScale(d) - padding - 15; }) .attr("width", xScale.rangeBand()) .attr("fill", "rgba(95, 159, 229, 0.3"); svg.selectAll("rect") .data(dataset) .transition().delay(function(d, i) { return i / dataset.length * 800; }) .duration(1500) .ease("linear") .attr("y", function(d) { return h - yScale(d) - padding - 15; }) .attr("height", function(d) { return yScale(d); }); svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return Math.floor(d3.max(dataset) - d); }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + padding + 15; }) .attr("y", function(d) { return h - yScale(d) - padding - 20; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") svg.append("g") .attr("class", "xAxis") .attr("transform", "translate(0," + (h - padding - 15) + ")") .call(xAxis); svg.append("g") .attr("class", "yAxis") .attr("transform", "translate(" + (padding + 15) + ",0)") .call(yAxis);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;D3: BDAS Bar Chart Test&lt;/title&gt; &lt;style&gt; svg { padding-left: 15px; padding-top: 30px; } rect { transition: 0.1s; } rect:hover { fill: rgba(95, 159, 229, 1); } .xAxis path, .yAxis path { fill: #aaa; height: 0.5px; } .xAxis .tick text, .yAxis .tick text { font-family: sans-serif; fill: #aaa; font-size: 15px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p>