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

根据这篇文章，我们列出了d3v3和d3v4中直方图布局的以下区别：

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

来自d3v4变更量g的更详细解释

新的d3.histogram API取代了d3.layout.histogram。直方图不公开每个返回的bin上的bin.x和bin.dx，而是公开bin.x0和bin.x1，确保bin.x0与前面bin上的bin.x1完全相等。不再支持“频率”和“概率”模式；每个bin只是输入数据中的元素数组，因此在频率模式下，bin.length等于D3 3.x的bin.y。若要计算概率分布，请将每个桶中的元素数除以元素总数。 为了与尺度保持一致，histogram.range方法被重命名为histogram.domain。histogram.bins方法已被重命名为histogram.thresholds，不再接受较高的值：n阈值将生成n + 1回收箱。如果您指定了所需的回收箱数量而不是阈值，那么d3直方图现在使用d3.ticks来计算漂亮的bin阈值。除了默认的St认公式之外，D3现在实现了Freedman-Diaconis规则和斯科特正常参考规则。

因此，您应该以这样的方式重写提到的代码片段：

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>

​