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变为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 changelog的详细解释：

新的d3.histogram API取代了d3.layout.histogram。而不是   在每个返回的bin上公开bin.x和bin.dx，直方图公开   bin.x0和bin.x1，保证bin.x0完全等于bin.x1   在前面的垃圾箱。 “频率”和“概率”模式是否定的   支持更长;每个bin都只是一个元素数组   输入数据，因此bin.length在频率上等于D3 3.x的bin.y   模式。要计算概率分布，请将数量除以   每个bin中的元素乘以元素总数。

histogram.range方法已重命名为histogram.domain   与量表的一致性。 histogram.bins方法已重命名   histogram.thresholds，不再接受较高的值：n   阈值将产生n + 1个箱子。如果指定所需的数量   bins而不是阈值，d3.histogram现在使用d3.ticks来计算   不错的bin阈值。除了默认的Sturges公式，D3   现在实现Freedman-Diaconis rule和Scott’s normal reference rule。

所以你应该用这种方式重写提到的代码片段：

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

但您还需要重写代码的其他部分，并将d.x+d.dx替换为d.x1，将d.y替换为d.length，将d.dx替换为{{1} }}

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

＆＃13;

d.x1-d.x0

＆＃13;

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

＆＃13;

d3.layout.histogram（）和属性在v4中不起作用

1 个答案: