score:1

Accepted answer

The problem here is this line:

.attr("y", function(d) {
    return height - d
});

Why are you using the raw data value? You have to use the value returned by the scale:

.attr("y", function(d) {
    return height - yScale(d)
});

Here is the updated code:

var data = [40, 60, 80, 100, 600, 700];
var height = 500,
  width = 500;

var canvas = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var yScale = d3.scaleLinear()
  .domain([40, 700])
  .range([0, 400]);

var bars = canvas.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", function(d) {
    return yScale(d)
  })
  .attr("x", function(d, i) {
    return i * 35
  })
  .attr("y", function(d) {
    return height - yScale(d)
  });
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag