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

2023-12-14

我想将基于 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 一起使用?提前致谢。


根据本文我们列出了 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 变更日志:

The new d3.直方图API 取代了 d3.layout.histogram。而不是 暴露bin.x and bin.dx在每个返回的 bin 上,直方图显示bin.x0 and bin.x1,保证bin.x0正好等于bin.x1在前一个垃圾箱上。 “频率”和“概率”模式不存在 不再受支持;每个 bin 只是一个元素数组 输入数据,所以bin.length等于 D3 3.x 的bin.y在频率上 模式。要计算概率分布,请除以 每个 bin 中的元素除以元素总数。

The histogram.range方法已重命名histogram.domain为了 与尺度的一致性。 histogram.bins 方法已重命名histogram.thresholds,并且不再接受上限值:n阈值将产生n + 1垃圾箱。如果您指定所需的数量 d3.histogram 现在使用 bin 而不是阈值d3.ticks计算 不错的垃圾箱阈值。除了默认的 Sturges 公式外,D3 现在实施弗里德曼-戴科尼斯法则 and 斯科特的正常参考规则.

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

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

但您还需要重写代码的其他部分并替换:d.x+d.dx to d.x1, d.y to d.length and d.dx to 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

d3.layout.histogram() 和属性在 v4 中不起作用 的相关文章

  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 需要js、d3 和 nvd3 集成

    我面临整合的问题要求 questions tagged requirejs with d3 questions tagged d3 and nvd3 questions tagged nvd3 我找到了一个使用 require 的简单解决方
  • 如何在“object”标签内选择 SVG?

    HTML 页面的内容如下所示 方法如下script js looks var tooltip d3 select body append div style position absolute sty
  • 为什么我的 D3 SVG 图上的轴不会更新?

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换
  • 如何在 Angular 2 中实现 D3

    我想将这段代码从 d3 js 实现到 Angular 2 组件 但我不知道如何将 js 文件调用到组件 ts 文件中 我找到了一些折线图的代码 包括index html和lineChart js 我怎样才能调用javascriptngAft
  • 获取现有 SVG 元素的属性并使用 d3.js 绑定为数据

    我有一个现有的 svg 元素 例如
  • 将json解析为条形图d3js

    我正在尝试使用 json url 创建条形图 关于印象和时间 我认为我没有正确引用 data data 中的数据 如何从 d3 中的 json 文件访问印象字段 var url https script google com macros
  • d3.js 强制布局是否允许动态 linkDistance?

    我使用力布局来表示有向未加权网络 我的灵感来自以下例子 http bl ocks org mbostock 1153292 http bl ocks org mbostock 1153292 我的问题是 在我的情况下 节点之间有更多的链接
  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • d3js 折线图——如何将最后一步延伸到范围末尾?

    很简单 但我无法摆脱这个问题 线是两点 值 之间的链接 从值 A 绘制到值 B 因此 假设 A 的值为 10 B 的值为 20 而 C 缺失 现在从 0 到 10 到 20 的线已经绘制完毕 我想画从 0 到 10 到 20 到 25 的线
  • 如何从 mysql 数据库中提取数据并使用 D3.JS 进行可视化?

    我有一个数据库MySQL我想在其中可视化D3 JS 为了做到这一点 首先我想parse中的数据JSON格式 然后编写一个基本代码 从数据库中提取数据并使用D3 JS 我环顾四周 但找不到我想要的东西 因为我是新手D3 JS 我怎样才能做到这
  • 如何在 d3 中使用SimulationLinkDatum和SimulationNodeDatum

    我在使用SimulationLinkDatum 类型时遇到问题 我创建了两个类 Node 和 Link 来实现SimulationNodeDatum 和SimulationLinkDatum 当我尝试使用SimulationLinkDatu
  • 创建链接到 csv 文件的表

    我正在尝试创建一个链接到的表 csv使用 d3 文件 但我得到的只是一个空白网页 即使以克里米亚为例 我也得到一张空白页 我将很高兴得到指导或展示一个可行的例子或关于我做错了什么的建议 如果您询问如何从 CSV 数据创建 HTML 表 这就
  • 在 X 轴刻度上渲染 HTML

    我想在 D3 图表的 x 轴上渲染 HTML 基本上 我希望轴上的每个标签都是到数据中另一列的超链接 我试过了 x domain data map function d return a href d Name a 但它根本不起作用 我得到
  • D3.js 从 file:/// 加载本地数据文件

    我知道D3 js支持使用XHR和JSONP加载数据文件requests https github com mbostock d3 wiki Requests 但就我而言 我将通过从文件系统双击 html 文件来运行它们 这将像file fo
  • svg / d3.js 矩形一侧的圆角

    我知道 svg 有一个内置函数可以做圆角 但我只需要在四个角中的 2 个上做圆角 我知道我可以在彼此之上绘制多个矩形来模仿这一点 但这看起来有点俗气 有什么方法可以使用剪辑或任何 d3 js 方法来做到这一点吗 现在我有一个水平条形图 其中
  • 在 D3 v4 中使用 Zoom.translateExtent 约束地图平移

    我正在尝试显示单个州的地图 并将缩放和平移限制在州的边界内 除了缩放状态路径以适应较小的容器时的平移约束之外 它大部分都在工作 我认为这归结于我不明白该使用什么参数zoom translateExtent 虽然我对此很陌生 所以它可能是别的
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph

随机推荐

  • python 可以处理未计算的表达式参数吗?

    我想将一条语句传递给 python 函数 该语句只应在我在函数中执行其他操作后执行 默认情况下 python 计算语句 然后将其结果作为参数传递 有什么办法可以改变这种行为吗 我发现的唯一方法是将语句包装在函数中 然后传递该函数 大多数 P
  • 如何将 LinearGradient 添加到垂直 SVG 线[重复]

    这个问题在这里已经有答案了 我正在尝试为线条的笔划添加渐变 该线条在顶部淡出 但没有运气 实际上 我的工作原理是这样的 但即使在 Chrome 中 某些 SVG 尺寸也会出现浏览器问题 其中渐变会中断并且是固定的
  • MacOS X 10.6.2 上的 Perl:GDBM_File 丢失,如何安装或解决?

    当我需要 Perl 模块时 我通常使用 CPAN 效果很好 但这次不是 我想使用MARC Charset 但是这个使用GDBM File 而且我似乎无法从CPAN安装GDBM File CPAN 发现一切正常 但尝试安装它时 它开始安装完整
  • 为什么 useState 会让组件渲染两次?

    也许你们中的一些人可以让我睁开眼睛 我不明白为什么在这段代码中 https codesandbox io s use state renders twice 6r1xl组件 App 在安装并单击按钮时渲染两次 console log 被调用
  • Qt 中的自定义圆形进度条[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我可以在覆盖时在 qt 中执行循环进度条paintEvent小部件并绘制圆形进度条 但在主圆形进度条后面的第二个圆形进度条 无法像这样绘制 有困难 有人可以指导我吗 预先感谢 我
  • 如何使用R中的“bootstrap函数”计算置信区间

    我正在尝试计算R中的置信区间 由于一些特殊原因 我必须使用 bootstrap 包中的函数来计算 这意味着我不能使用 boot 包中的函数 这是我的代码 我正在做的是尝试计算 Pearson 相关系数 然后应用 Bootstrap 方法 B
  • awk 不匹配所有匹配我的所有条目

    我正在尝试制作 脚本 本质上是一个 awk 命令 来提取 c 文件中 C 代码函数的原型 以自动生成标头 h 我是 awk 的新手 所以我不了解所有细节 这是源 c 的示例 dict t dictup dict t d const char
  • Jetty:如何在 Jetty 客户端使用 SSL

    我正在使用 Jetty 开发我的客户端应用程序端 我没有在服务器部分使用 Jetty 我需要在客户端配置什么才能使用 Jetty 客户端发送 https 请求 这就是我对 HTTP 客户端所做的事情 httpClient new HttpC
  • JsonConvert.DeserializeObject 特殊字符 未终止的字符串。预期分隔符:

    由于某种原因 当我的淘汰模型中有一个特殊字符并将其转换为 json 对象时 字符串在特殊字符应该在的位置结束 并且在反序列化时出现错误 ajax url Admin Forms Convert type post contentType a
  • Retrofit 2 的定制转换器

    我必须处理动态 JSON 响应 之前 我使用类和注释如下 public class ChatResponse SerializedName status private int status SerializedName error pri
  • 在哪里删除 Swift 中 NSNotification 的观察者?

    我应该在哪里删除观察者NSNotification在斯威夫特 因为viewDidUnload and dealloc 不可用 As of iOS 9 和 OS X 10 11 你不需要移除观察者你自己 如果你不使用基于块的观察者的话 系统会
  • 为什么 IIS Express 在加载 javascript 和 CSS 时返回 HTTP 500 错误?

    我正在尝试使用 IIS Express 开发 ASP NET MVC5 解决方案进行本地调试 通常 Chrome 在尝试加载某些 JS 和 CSS 文件时会报告 HTTP500 错误 有些使用 MVC 的内置捆绑和缩小功能 有些则使用自己的
  • 错误:使用 wikixmlj 解析 xml 文件时出现 xml.sax.SAXParseException

    我正在使用解析维基百科 xml 转储wikixmlj并收到以下错误 org xml sax SAXParseException lineNumber 64243259 columnNumber 371 JAXP00010004 The ac
  • Nodejs FS 模块返回 no such file or dir 错误

    Code fs readdir commands err files gt Do something Error ENOENT 没有这样的文件或目录 scandir commands 文件夹 commands does存在 这个文件是src
  • MapKit 中的 MapTypeStyle

    我想知道是否有任何方法可以配置我们的 MapKit 地图 就像我们在 Google 地图 API 中使用 MapTypeStyle 对象一样 如果我参考Apple文档 MKMapView有一个mapType选项 它需要MKMapType常量
  • MySQL删除语句优化

    我有一些删除查询要针对一些相当大的表 100 GB 运行 并且我想尽可能地优化它们 delete from table1 where column1 lt date sub now interval 100 hour 第 1 列是datet
  • 如何使用 C# .NET 将屏幕捕获为视频?

    是否有一些库可以将屏幕捕获为压缩视频文件或可以执行此操作的某种解决方案 此代码使用 NuGet 上提供的 SharpAvi using System using System Drawing using System Drawing Ima
  • 生成唯一ID的公式?

    我想了解一些关于在不使用 GUID 的情况下生成唯一 id 的想法 最好我希望唯一值是 int32 类型 我正在寻找可用于数据库主键以及 url 友好的东西 这些可以被认为是独特的吗 int DateTime Now Ticks int D
  • 在Java中,如何检查输入是否是数字?

    我正在制作一个简单的程序 可以让您添加比赛的结果以及他们完成比赛所用的秒数 为了输入时间 我这样做了 int time Integer parseInt JOptionPane showInputDialog Enter seconds 所
  • d3.layout.histogram() 和属性在 v4 中不起作用

    我想将基于 D3 js v3 的代码 转换 为 D3 js v4 我不知道我必须在以下代码中更改什么才能不显示任何错误 var data d3 layout histogram bins resolution frequency 0 res