在不同时区显示数据

Question

摘要

我收集了大量具有不同日期时间的数据。目前，我已经能够对所有数据进行分组以在本地时区正确显示；但是，当尝试在不同的时区显示此数据时，lineChart上的行变得断断续续，并且它们之间的连接不像在本地时区中那样平滑。

我在这里找到了详细说明可能的解决方案的链接，但遗憾的是，如果我不复制整个数据集而将其复制到utc的时间，然后再正常复制一次，这将无法正常工作。我拥有的数据不仅用于多个图表中，以获取有关趋势和统计数据的见解，而且还有一个原始表，用于显示/编辑/查看特定数据成员。因此，将其中一个转换为utc时间并计算utc时间的时间变化会抛出另一个。

https://groups.google.com/forum/#!msg/d3-js/iWmP9Npv2Go/xyypdLjWu2QJ

我的问题是：有没有一种方法可以跨时区转换日期时间数据，并让dc.js尊重您要显示的时区。我希望调整后的图看起来与本地图看起来在线条所在的位置相同并非基于时区是单方面的。

代码和照片

小提琴：https://jsfiddle.net/spacarar/j0urt9sy/49/

这是我当地时区的正确显示的图像。线条是日期之间的平滑过渡。

这是任何其他时区的错误显示的图像（取决于我的本地更改方位的方向是从左倾斜到右倾斜）

我的数据的简化版本看起来像这样：

var data = [
  {
    value: 42,
    datetime: '2019-10-24T07:18:00.000000'
  },
  {
    value: 10,
    datetime: '2019-10-24T07:19:12.000000'
  },
  {
    value: 12,
    datetime: '2019-10-29T04:18:00.000000'
  },
  {
    value: 8,
    datetime: '2019-10-29T09:18:00.000000'
  }
]

然后我伪造一个组来填充数据中可能不存在的任何日期，并使用moment-timezone对其进行翻译，以得到类似于此的数据结构

{
  value: 0,
  datetime: moment timezone object with full datetime,
  date: moment timezone object representing only date (0 hours, minutes, seconds, ms)
}

然后使用以下代码将此伪造的分组/固定数据用于创建图表

var ndx = dc.crossfilter(fakeGroupedData)

var dateDim = ndx.dimension(dc.pluck('date'))
var top = dateDim.top(1)[0] ? dateDim.top(1)[0].date : null
var bottom = dateDim.bottom(1)[0] ? dateDim.bottom(1)[0].date : null

var chart = dc.lineChart('#date-chart')
chart.yAxis().tickFormat(dc.d3.format(',.0f'))
chart.xAxis().ticks(10).tickFormat(d => moment(d).format('M/D'))

chart.dimension(dateDim)
  .group(dateDim.group().reduceSum(dc.pluck('value')))
  .x(dc.d3.scaleTime().domain([bottom, top]).nice())
  .elasticY(true)
  .renderArea(true)
  .render()