d3.js - d3.layout.histogram() 和属性在 v4 中不起作用

Question

我想将基于 D3.js v3 的代码“转换”为 D3.js v4。

我不知道我必须在下面的代码中更改什么它不显示任何错误:

var data = d3.layout.histogram()
                        .bins(resolution)
                        .frequency(0)
                        (results);

我知道在 d3.js v4 中没有像 d3.layout.histogram() 这样的东西 - 我只在 API 中找到了 d3.histogram() .但是如何更改第 2-4 行的“语法”以使其与 v4 一起使用？提前致谢。

Answer 1

根据 this article我们有以下 d3v3 和 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

来自 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.

所以你应该这样重写提到的代码片段:

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

但是你还需要重写你的代码的其他部分，将:d.x+d.dx替换为d.x1，d.y 到 d.length 和 d.dx 到 d.x1-d.x0。

如何使用 d3v4 创建直方图布局的示例请参见下面的隐藏代码段:

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>