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()- 我只d3.histogram()在 API 中找到。但是如何更改第 2-4 行的“语法”才能使其与 v4 一起使用？提前致谢。

Answer 1

根据本文，我们列出了 d3v3 和 d3v4 中直方图布局之间的差异：

\n\n

\n

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

\n

\n\n

d3v4 变更日志中有更详细的解释：

\n\n

\n

新的d3.histogram API 取代了 d3.layout.histogram。直方图 不是在每个返回的 bin 上公开bin.x和，而是公开 \n和，保证其与前一个 bin 上的 \n完全相等。不再支持 \xe2\x80\x9cFrequency\xe2\x80\x9d 和 \xe2\x80\x9cprobability\xe2\x80\x9d 模式；每个 bin 只是输入数据中的元素数组，因此在频率模式下等于 D3 3.x\xe2\x80\x99s 。要计算概率分布，请将每个 bin 中的\n 元素数除以元素总数。bin.dxbin.x0bin.x1bin.x0bin.x1bin.lengthbin.y

\n\n

为了与尺度保持一致，该histogram.range方法已被重命名。histogram.domainhistogram.bins 方法已重命名\n histogram.thresholds，并且不再接受上限值：n\n 阈值将生成n + 1bin。如果您指定所需的 bin 数量而不是阈值，则 d3.histogram 现在使用d3.ticks来计算合适的 bin 阈值。除了默认的 Sturges\xe2\x80\x99 公式之外，D3\n 现在还实现了Freedman-Diaconis 规则和Scott\xe2\x80\x99s 正常参考规则。

\n

\n\n

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

\n\n

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

\n\n

但您还需要重写代码的其他部分并替换：d.x+d.dxto d.x1、d.ytod.length和d.dxto d.x1-d.x0。

\n\n

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

\n\n

\r\n

\r\n

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

\r\n

var data = [\r\n  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,\r\n  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,\r\n  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,\r\n  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,\r\n  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,\r\n  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\r\n];\r\n\r\nvar width = 952;\r\nvar height = 476;\r\nvar x = d3.scaleLinear().domain([30, 110]).range([0, width]);\r\n\r\nvar bins = d3.histogram().domain(x.domain()).thresholds(x.ticks(30))(data);\r\n\r\nvar max = d3.max(bins, function(d) {\r\n  return d.y;\r\n});\r\n\r\nvar y = d3.scaleLinear().domain([0, .1]).range([0, height]);\r\n\r\nvar yForHistogram = d3.scaleLinear()\r\n  .domain([0, d3.max(bins, function(d) {\r\n    return d.length;\r\n  })])\r\n  .range([height, 0]);\r\n\r\nvar vis = d3.select("body")\r\n    .append("svg")\r\n    .attr("width", width)\r\n    .attr("height", height);\r\n\r\nvar bars = vis.selectAll("g.bar")\r\n  .data(bins)\r\n  .enter().append("g")\r\n  .attr("class", "bar")\r\n  .attr("transform", function(d) {\r\n    return "translate(" + x(d.x0) + "," + yForHistogram(d.length) + ")";\r\n  });\r\n\r\nbars.append("rect")\r\n  .attr("fill", "steelblue")\r\n  .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)\r\n  .attr("height", function(d) {\r\n    return height - yForHistogram(d.length);\r\n  });

\r\n

\r\n

\r\n

\n