首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在NVD3上使用datetype时,xAxis线图tics与网格错误地对齐

在NVD3上使用datetype时,xAxis线图tics与网格错误地对齐
EN

Stack Overflow用户
提问于 2015-11-27 14:34:50
回答 1查看 2.4K关注 0票数 3

我目前正在使用NVD3使用角指令(角-nvd3 3)。我有一个非常简单的线条图和非常简单的数据。

我现在遇到的问题是我的数据与Axis错误地对齐。示例柱塞器在这里可用:http://plnkr.co/edit/jWEYt6?p=preview

我在xAxis上使用日期,这些日期是使用d3库解析的:

代码语言:javascript
代码运行次数:0
运行
复制
tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}

描述:

我希望xAxis标签与网格相对应。

在这个示例中,您可以清楚地注意到xAxis是不均匀划分的(值: 06/11、08/11、11/11、13/11)。所以通常是2天,有时是3天:)

更糟糕的是,这些山峰与电网不匹配。例句: 06/11滴答实际上并不接近网格的线,我猜它应该在那里。

我也在回购公司的master's代码上尝试过这一点,而且它也发生在那里。在head部分有一个链接。

我的数据、正确的日期格式或其他方面是否有问题?谢谢!

EN

回答 1

Stack Overflow用户

发布于 2016-02-11 15:58:05

因为问题是,根据Atais的说法:

由于d3.time.format('%d/%m'),实际问题是隐藏的。我的示例数据是以每天一次滴答的方式给出的,并相应地设置了格式。但d3不明白这一点。当绘制网格时,它将最大值/某个值除以,网格滴答不一定发生在全天(午夜),而是在任何一个小时。因为格式的问题,我看不出来。

我设法将x的值作为整数值 (ex: 20160211)传递给nvd3,而不是格式化日期(ex: 2016-02-11或nvd3),然后在tickFormat上格式化它们以正确显示。

我用这个问题和注释的解决方案编写了另一个柱塞(使用了动量):

具有模拟误差的柱塞:http://plnkr.co/edit/fXDQ0f?p=preview

数据是以x: milliseconds, y: int格式提供的,就像{x: 1446418800000, y: 20},一样,并且正在用tickFormat进行格式化。

代码语言:javascript
代码运行次数:0
运行
复制
  xAxis: {
    tickFormat: function(d) {
      return moment(d).format('YYYY-MM-DD');
    }
  }

使用解决方案的柱塞:http://plnkr.co/edit/KpALzo?p=preview

数据是以x: int, y: int格式提供的,就像{x: 20160211, y: 20},一样,并且正在用tickFormat进行格式化。

代码语言:javascript
代码运行次数:0
运行
复制
  xAxis: {
    tickFormat: function(d) {
      moment(d, 'YYYYMMDD').format('YYYY-MM-DD');
    }
  }

请注意,您也可以用时间来完成它,只需附加到“数字日期”。

如@ajaybc中所述,将不能很好地处理不同月份的日期,因为d3将在填充日期无效的情况下插入X轴( 32、33、34天等)

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33959649

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档