d3.layout.histogram() and attributes don't work in v4

Question

I would like to \"convert\" a D3.js v3 based code to D3.js v4.

I don\'t know what I have to change in the following code that it doesnt display any error:

Answer 1

According to this article we have the following list of differences between histogram layout in d3v3 and d3v4:

• d3.layout.histogram becomes d3.histogram
• .bins becomes .thresholds
• d3.scale.linear becomes d3.scaleLinear
• d.x+d.dx becomes d.x1
• d.y becomes d.length
• d.dx becomes d.x1-d.x0

More detailed explanations from d3v4 changelog:

The new d3.histogram API replaces d3.layout.histogram. Rather than exposing bin.x and bin.dx on each returned bin, the histogram exposes bin.x0 and bin.x1, guaranteeing that bin.x0 is exactly equal to bin.x1 on the preceeding bin. The “frequency” and “probability” modes are no longer supported; each bin is simply an array of elements from the input data, so bin.length is equal to D3 3.x’s bin.y in frequency mode. To compute a probability distribution, divide the number of elements in each bin by the total number of elements.

The histogram.range method has been renamed histogram.domain for consistency with scales. The histogram.bins method has been renamed histogram.thresholds, and no longer accepts an upper value: n thresholds will produce n + 1 bins. If you specify a desired number of bins rather than thresholds, d3.histogram now uses d3.ticks to compute nice bin thresholds. In addition to the default Sturges’ formula, D3 now implements the Freedman-Diaconis rule and Scott’s normal reference rule.

So you should rewrite mentioned code snippet this way:

var data = d3.histogram()
  .thresholds(resolution)
  (results);

But you also need to rewrite other parts of your code and replace: d.x+d.dx to d.x1, d.y to d.length and d.dx to d.x1-d.x0.

Example how to create histogram layout with d3v4 see in the hidden snippet below:

var data = [
  79, 54, 74, 62, 85, 55, 88, 85, 51, 85, 54, 84, 78, 47, 83, 52, 62, 84, 52, 79, 51, 47, 78, 69, 74, 83, 55, 76, 78, 79, 73, 77, 66, 80, 74, 52, 48, 80, 59, 90, 80, 58, 84, 58, 73, 83, 64, 53,
  82, 59, 75, 90, 54, 80, 54, 83, 71, 64, 77, 81, 59, 84, 48, 82, 60, 92, 78, 78, 65, 73, 82, 56, 79, 71, 62, 76, 60, 78, 76, 83, 75, 82, 70, 65, 73, 88, 76, 80, 48, 86, 60, 90, 50, 78, 63, 72,
  84, 75, 51, 82, 62, 88, 49, 83, 81, 47, 84, 52, 86, 81, 75, 59, 89, 79, 59, 81, 50, 85, 59, 87, 53, 69, 77, 56, 88, 81, 45, 82, 55, 90, 45, 83, 56, 89, 46, 82, 51, 86, 53, 79, 81, 60, 82, 77,
  76, 59, 80, 49, 96, 53, 77, 77, 65, 81, 71, 70, 81, 93, 53, 89, 45, 86, 58, 78, 66, 76, 63, 88, 52, 93, 49, 57, 77, 68, 81, 81, 73, 50, 85, 74, 55, 77, 83, 83, 51, 78, 84, 46, 83, 55, 81, 57,
  76, 84, 77, 81, 87, 77, 51, 78, 60, 82, 91, 53, 78, 46, 77, 84, 49, 83, 71, 80, 49, 75, 64, 76, 53, 94, 55, 76, 50, 82, 54, 75, 78, 79, 78, 78, 70, 79, 70, 54, 86, 50, 90, 54, 54, 77, 79, 64,
  75, 47, 86, 63, 85, 82, 57, 82, 67, 74, 54, 83, 73, 73, 88, 80, 71, 83, 56, 79, 78, 84, 58, 83, 43, 60, 75, 81, 46, 90, 46, 74
];

var width = 952;
var height = 476;
var x = d3.scaleLinear().domain([30, 110]).range([0, width]);

var bins = d3.histogram().domain(x.domain()).thresholds(x.ticks(30))(data);

var max = d3.max(bins, function(d) {
  return d.y;
});

var y = d3.scaleLinear().domain([0, .1]).range([0, height]);

var yForHistogram = d3.scaleLinear()
  .domain([0, d3.max(bins, function(d) {
    return d.length;
  })])
  .range([height, 0]);

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

var bars = vis.selectAll("g.bar")
  .data(bins)
  .enter().append("g")
  .attr("class", "bar")
  .attr("transform", function(d) {
    return "translate(" + x(d.x0) + "," + yForHistogram(d.length) + ")";
  });

bars.append("rect")
  .attr("fill", "steelblue")
  .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
  .attr("height", function(d) {
    return height - yForHistogram(d.length);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>