Javascript D3时区偏移移到前一天

详细信息

• 初始时间戳是来自服务器的Unix编码的EST日期（无时间）
• NVD3（D3分叉）正在呈现一个带有焦点栏（画笔）的堆叠面积图，以允许导航数据

问题

• 该图表以本地时间显示x轴，当您在不同的日期进行偏移时，x轴将在不同的日期显示
• 画笔（焦点图表）以小时为单位处理时间线，尽管在任何时间戳中都没有使用小时

所需解决方案

• 图表应显示在EST中，忽略本地TZ
• 笔刷应设置为天块，而不是设置小时，小时应为EST

图表初始化代码

function createStackedTimeSeriesChart(chartName, data, margins, tableName, ajaxPath, filterType, timeColumn, statuses, document_types, showLegend, percentage) {

    if(typeof(data) == 'undefined') {
        $('#' + chartName).parent().text('no data found');
        return;
    }

    if(data.length == 0) {
        $('#' + chartName).parent().text('no data found');
        return;
    }

    try {

        var maxValue = data[0]['values'][0]['x'];
        var minValue = maxValue;
        for(var i = 0; i < data.length; i++) {
            for(var v = 0; v < data[i]['values'].length; v++) {
                if(data[i]['values'][v]['x'] > maxValue) maxValue = data[i]['values'][v]['x'];
                if(data[i]['values'][v]['x'] < minValue) minValue = data[i]['values'][v]['x'];
                data[i]['values'][v]['x'] = new Date(data[i]['values'][v]['x']);
            }
        }

        var chart;
        nv.addGraph(function() {
            chart = nv.models.stackedAreaWithFocusChart()
                .useInteractiveGuideline(true)
                .x(function(d) { return d['x'] })
                .y(function(d) { return d['y'] })
                .controlLabels({stacked: "Stacked", expanded: "Expanded"})
                .duration(300)
                .color(function(d){return getChartColorByValue(d)})
                .showControls(false)
                .showLegend(showLegend)
                .clipEdge(false);

            var chart_wrapper = new Chart(chartName, chart, tableName, ajaxPath, data, filterType, timeColumn, statuses, document_types);
            chart_wrapper.oldest_date = moment(maxValue);
            chart_wrapper.dataTable.percentage = percentage;

            chart.interactiveLayer.tooltip.contentGenerator(tooltipContentGenerator(chart_wrapper));

            var extentPeriod = chart_wrapper.getCurrentYearSpan();
            chart.brushExtent([extentPeriod.begDate, extentPeriod.endDate]);

            chart.xAxis.tickFormat(function(d) { return d3.time.format('%d/%m/%Y') (new Date(d)) });
            chart.x2Axis.tickFormat(function(d) { return d3.time.format('%d/%m/%Y') (new Date(d)) });
            chart.xAxis.axisLabel("date");
            chart.yAxis.tickFormat(d3.format(',.0f'));
            chart.y2Axis.tickFormat(d3.format(',.4f'));

            chart.legend.vers('furious');

            chart.legend.margin(margins);

            atleastOnePoint = false;

            d3.select('#' + chartName)
                .datum(data)
                .transition().duration(1000)
                .call(chart)
                .each('start', function() {
                    setTimeout(function() {
                        d3.selectAll('#' + chartName + ' *').each(function() {
                            if(this.__transition__)
                                this.__transition__.duration = 1;
                        })
                    }, 0)
                });

            nv.utils.windowResize(chart.update);

            charts_array[chartName] = chart_wrapper;
            chart.update();

            chart.dispatch.on('renderEnd', function(e) { chart_wrapper.refreshDataTable(); });

            return chart;
        });

    } catch(e) {
        $('#' + chartName).parent().text(e);
    }

}

函数createStackedTimeSeriesChart（图表名、数据、边距、表格名、ajaxPath、过滤器类型、时间列、状态、文档类型、显示图例、百分比）{
如果（数据类型）=“未定义”）{
$（'#'+chartName）.parent（）.text（'未找到数据'）；
返回；
}
如果（data.length==0）{
$（'#'+chartName）.parent（）.text（'未找到数据'）；
返回；
}
试一试{
var maxValue=data[0]['values'][0]['x']；
var minValue=maxValue；
对于（变量i=0；imaxValue）maxValue=data[i]['values'][v]['x']；
如果（数据[i]['values'][v]['x']

我已经解决了我的问题，不再使用TZ感知API，而是切换到日期字符串

• 服务器将转换为所需的TZ（EST），并将结果作为日期字符串传递
• 客户端主要使用moment JS，从日期开始创建对象 带本地TZ的字符串。时间是没有意义的，我只使用日期
• 矩对象被转换为带有本地TZ集的NVD3的JS日期对象
• 若要获取仅日期笔刷范围，我将转换为“时刻”，然后将开始日期四舍五入到第二天（如果小于一天的开始）。我倒在地板上的结束日期
• 当使用新的日期范围调用服务器时，我将转换为日期字符串（它碰巧一直在EST中）

这个解决方案比我之前尝试的更简单。

初始时间戳是Unix编码的EST日期（无时间）”的实际值是多少？“Unix编码的EST日期”是什么还不清楚。此外，“EST”可以表示3个不同时区中的任意一个，您想要哪一个？@RobG unix timestamp（例如1500988680）。EST=加拿大多伦多。我想TS应该包括小时，因为它是UTC。