dc.js barChart 第一个和最后一个栏未完全显示

2024-01-10

我有一个条形图d3.time.scalex 轴。我每小时显示一些数据,但使用时第一个和最后一个数据点条总是被切成两半centerBar(true).
(当使用centerBar(false)最后一个栏完全消失。)

时间窗口基于数据本身,计算如下:

var minDate = dateDim.bottom(1)[0]["timestamp"];
var maxDate = dateDim.top(1)[0]["timestamp"];

.x(d3.time.scale().domain([minDate, maxDate]));

The last line sets the time scale domain to use min and maxDate. This is how it looks: dc.js barChart 1

我使用稍微增加了条形宽度.xUnits(function(){return 60;})因为默认值太细,以至于第一个条在 y 轴内消失。

Also I already tried to change the domain by substracting/adding one hour to min/maxDate, but this results in unexpected behaviour of the first bar. enter image description here

我使用以下方法来计算偏移量:

minDate.setHours(minDate.getHours() - 1);
maxDate.setHours(maxDate.getHours() + 1);

是否有修复或解决方法可以在第一个栏之前和最后一个栏之后添加填充?


从 minDate 中减去一个小时,然后向 maxDate 添加一个小时,即可在最小和最大数据的每一侧获得一小时的填充量。

这里的技巧是使用 d3.time.hour.offset 并使用偏移量,直到看起来不错为止。

.x(d3.time.scale().domain([d3.time.hour.offset(minDate, -1), d3.time.hour.offset(maxDate, 2)])); `

看看这个小提琴http://jsfiddle.net/austinlyons/ujdxhd27/3/ http://jsfiddle.net/austinlyons/ujdxhd27/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

dc.js barChart 第一个和最后一个栏未完全显示 的相关文章

  • d3树计算所有孩子的数量

    我有一个基于以下内容的 d3 树 http bl ocks org mbostock 1093025 http bl ocks org mbostock 1093025 我如何计算所有孩子的数量 我已经尝试过这个 但是它计算了树中的所有行
  • d3.js:如何在圆环图中的标签下方添加值

    我是 d3 js 的新手 到目前为止我所取得的成就是 this https jsfiddle net saras arya ypdw96v9 使用教程和视频 Now I am trying to add the dataset value
  • DC.js 到 React 的转换

    有 dc js 反应转换的示例吗 对折线图 表格和时间滑块 带画笔的条形图 感兴趣 任何帮助 将不胜感激 Thanks 这是将 DC js 转换为 React 的开始 使用的库的版本如下 package json dependencies
  • D3:打字机风格的文本过渡

    In this jsfiddle http jsfiddle net VividD QbysN 标签通过减小旧文本的字体 然后增加新文本的字体 从一个文本过渡到另一个文本 但是 我希望新文本以 打字机 方式出现 就像这样jsfiddle h
  • 用渐变色绘制一个 D3 圆

    如何用渐变颜色画一个圆 比如说 从黄色到蓝色的渐变 通常 要创建黄色圆圈 我们可以使用以下代码 var cdata 50 40 var xscale 40 var xspace 50 var yscale 70 var svg d3 sel
  • 调整小倍数迷你图

    我有一个热图 显示一些数据和热图每行的迷你图 如果用户单击行标签 则数据按降序排列 因此每个矩形都会放置在正确的位置 反之亦然 如果用户单击列标签 每个反应都以正确的方式放置 但我无法放置迷你图 这是代码 http plnkr co edi
  • 分层边缘捆绑:添加父组标签

    我对 HTML 和 JavaScript 还很陌生 我面临着著名的分层边缘捆绑可用here https bl ocks org mbostock 7607999 由 D3 js 库生成 My goal is to add a semi ci
  • 当节点扩展时增加d3中的连接链路长度

    我正在 d3 中研究可折叠力布局 我面临的问题是 当单击节点时 我需要增加节点之间链接的长度 以保持子节点之间的链接距离相同 当分析扩展时 如何增加分析和耀斑之间的距离 保持与子级的距离较小 是的 您可以通过定义一个函数来做到这一点力 链接
  • d3.js:在树布局中展开多个路径

    My JSON contains same node names in different paths I would like to be able to open all children with the same name or h
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • 使用 d3 在两个节点之间绘制多条边

    我一直在关注 Mike Bostock 的代码这个例子 http bl ocks org 1153292学习如何在 d3 中绘制有向图 并且想知道如何构建代码 以便可以在图中的两个节点之间添加多个边 例如 如果上例中的数据集定义为 var
  • 使用 d3.json()/d3.xhr() 进行多部分发布请求

    目前是否不支持通过请求提交多部分表单数据 我了解如何使用 d3 json post 执行 POST 如上所述here https stackoverflow com questions 12493758 xhr post request u
  • 如何在D3中导入json数据?

    如何在D3中导入json文件 I did d3 json temp json 但是我如何在进一步的代码中访问这个数据集呢 到目前为止我已经尝试过 var data d3 json temp json 但使用 data data 在其余代码中
  • 如何使用 d3.v4 中的 JSON 数据创建树布局 - 不使用 stratify()

    我正在尝试将一些 d3 代码从 v3 更新到版本 4 我有一个使用 JSON 数据的树形图 d3 v4 示例展示了如何使用 stratify 将表格数据 例如flare csv 转换为分层数据https bl ocks org mbosto
  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行?

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • D3 v4 在同一元素上进行画笔和缩放(鼠标事件不冲突)

    我的目标是构建一个使用两者的 D3 v4 图表d3 zoom https github com d3 d3 zoom and d3 brush https github com d3 d3 brush一起 如下 当鼠标位于 x 轴上时 用户
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • GeoJson 世界数据库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 需要使用 d3 js 显示国家和城市的地图 实际上 D3支持GeoJson格式 通常

随机推荐

  • PSR-0 代表什么? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我知道什么PSR 0是 如何 为什么 在哪里使用它 我已经用谷歌搜索了这个并查看了 stackoverflow 相关的帖子 但是不能找到任何东西 即使
  • 按下按钮时使用 JavaScript 显示/隐藏 div(并且首先隐藏所有 div)

    我是 javascript 新手 我无法从缝合隐藏 div 开始 我可以让 div 在彼此之间切换 任何帮助都会很棒
  • Java:按子值作为值分组

    假设我有一个对象 Person 其字段类型为 FirstName 和 LastName 现在我也有一个List
  • 带有 WebBrowser 控件的 Excel CustomTaskPane - 键盘/焦点问题

    我遇到了这个问题https social msdn microsoft com Forums vstudio en US e417e686 032c 4324 b778 fef66c7687cd excel customtaskpane w
  • CSS 重新排列特定元素并排,但在使用移动设备时堆叠/宽度太小?

    我一直在研究这个营养计算器 但在格式化 CSS 来优化数据可视化时遇到了麻烦 我尝试过调整 div 并添加容器 但由于某种原因 它只会导致重叠 我不知道如何修复 我的代码 https jsfiddle net q024go3v https
  • C# 如何将字符串转换为时间和日期格式?

    我有一个简短的程序 可以将字符串从简单的字符串转换为日期和时间格式 然而 由于字符串的顺序 系统似乎无法识别该字符串并将其转换为日期时间格式 应转换的字符串示例如下 Thu Dec 9 05 12 42 2010 方法为Convert To
  • 哪些对象保证具有不同的身份?

    原问题 我的问题适用于 Python 3 2 但我怀疑自 Python 2 7 以来这已经发生了变化 假设我使用我们通常期望创建对象的表达式 例子 1 2 3 42 abc range 10 True open readme txt MyC
  • 如何使用Python下载股票价格数据?

    我已经安装了pandas datareader但我想知道是否还有其他选择 到目前为止 我正在使用这个 import pandas datareader data as web start date 2018 01 01 end date 2
  • 签名扫描

    许多防病毒程序使用基于签名的恶意软件检测 这是为 ClamAV 创建签名 http www clamav net doc webinars Webinar Alain 2009 03 04 pdf 考虑到整个文件是恶意软件 我可以理解他们如
  • 如何加载用户.bashrc的RVM部分以在Apache下运行Ruby CGI脚本?

    我在 Ubuntu 12 04 上配置了一个新服务器 并开始使用 RVM 我已经按照我的用户 作为我自己 而不是使用 sudo 作为 root 安装了 RVM瑞安 比格的指南 http ryanbigg com 2010 12 ubuntu
  • R/Stringr 在第 n 次出现“_”后提取字符串,并以第一次出现“_”结束

    使用 R 和 stringr 包 或任何其他与此相关的包 我想在第 n 次出现 后提取字符串 并以第一次出现 结束 例如 df lt c J J HERE jfdkaldjhieuwui blahblah ffd THIS fjdkalfj
  • 如何生成新的GUID?

    我正在开发一个网络服务 需要一个新的GUID 作为对服务内方法的引用传递 我不熟悉C or the GUID object 但需要类似的东西PHP 因此创建一个新对象 根据我的理解 它返回一个empty blank GUID 有任何想法吗
  • 如何避免谷歌条形图中的条形标签重叠?

    我正在创建一个堆积条形图 需要显示堆栈内的标签 但很少有标签被重叠 以供参考image https i stack imgur com gGKG9 jpg 你能帮助我如何避免使用谷歌图表重叠吗 div div
  • if else key 分割 JSON

    我有这个功能 let input Apples Apples 501 82 Apples pos2 502 61 Apples pos3 502 61 Apples 502 16 let output Object keys input r
  • 拖动项目时触发的 click 事件 (Firefox)

    当我单击一个项目时 我可以编辑该字段 这要归功于引导程序可编辑 http vitalets github com bootstrap editable 当我拖放项目时 我可以更改项目的位置 这要归功于jquery ui sortable h
  • PhpStorm 中文件名旁边的神秘数字图标[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我不小心按下了 PhpStorm 中的热键 现在我的一个文件名旁边有一个小数字图标 这是什么意思 我该如何删除它 这是一个屏幕截图 这是什
  • 查询在 while 循环中无法正常工作

    我有一个 While 循环 我试图插入 DECLARE CurrentOffer int 121 DECLARE OldestOffer int 115 DECLARE MinClubcardID bigint 0 DECLARE MaxC
  • PHP脚本在特定时间执行

    有没有一种简单的方法可以让 php 脚本在一天中的特定时间执行一些 html 例如 我的主页上有一个标题 有时我希望能够在标题下方添加一些内容 在本例中是一个 iframe 我知道每个人都提到了 cron 作业 但是这将如何工作呢 还有替代
  • 使用 CSS3 过渡的动画 jQuery UI 可排序

    我如何使用 CSS3 过渡 或任何其他方式 来制作jQuery 可排序 http jqueryui com sortable 其行为更像是 iOS 中的列表重新排序 其中列表项在拖动时会平滑地进行动画处理 因此当您拖动时 项会迅速移开 编辑
  • dc.js barChart 第一个和最后一个栏未完全显示

    我有一个条形图d3 time scalex 轴 我每小时显示一些数据 但使用时第一个和最后一个数据点条总是被切成两半centerBar true 当使用centerBar false 最后一个栏完全消失 时间窗口基于数据本身 计算如下 va