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

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:
var data = d3.layout.histogram()
.bins(resolution)
.frequency(0)
(results);
I know that in d3.js v4 there isn't something like d3.layout.histogram() - I only found d3.histogram() in the API. But how do I change the "syntax" of line 2-4 in order to make it working with v4? Thanks in Advance.

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>