d3.layout.histogram()和属性在v4中不起作用 [英] d3.layout.histogram() and attributes don't work in v4

问题描述

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

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);

我知道在d3.js v4中没有类似d3.layout.histogram()的东西-我仅在API中找到了d3.histogram().但是，如何更改第2-4行的语法"以使其与v4兼容?预先感谢.

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.

推荐答案

根据本文以下是d3v3和d3v4中直方图布局之间的差异列表:

According to this article we have the following list of differences between histogram layout in d3v3 and 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

• 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更改日志:

新的 d3.histogram API取代了d3.layout.histogram.而不是 在每个返回的bin上暴露bin.x和bin.dx，直方图暴露 bin.x0和bin.x1，确保bin.x0完全等于bin.x1 在前面的箱子上. 频率"和概率"模式不是 不再受支持；每个垃圾箱只是来自 输入数据，因此bin.length的频率等于D3 3.x的bin.y 模式.要计算概率分布，请除以 每个元素中的元素总数.

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.

histogram.range方法已重命名为 histogram.domain 与天平的一致性. histogram.bins方法已重命名 histogram.thresholds ，并且不再接受上限值:n 阈值将产生n + 1 bin.如果您指定所需的数量 垃圾箱而不是阈值，d3.histogram现在使用 d3.ticks 计算 不错的垃圾箱阈值.除了默认的斯特吉斯"公式外，D3 现在实现了 Freedman-Diaconis规则和斯科特的正常参考规则.

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);

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

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.

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

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>

这篇关于d3.layout.histogram()和属性在v4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！