数据放置在 xAxis -nvd3 上的错误日期

Question

我用 nvd3 创建了一个 linelusBarChart。图形的数据是从 REST 服务接收的时间序列（对于线和条）。我面临的问题涉及数据在 xAxis 上的放置。当我缩小图表时，数据没有放在正确的位置（结果如下图所示）：但是当我放大时，数据被放置在与正确日期不同的日期（查看下图）：我该如何解决这个问题？

我的代码是：

chart = nv.models.linePlusBarChart()
                    .focusEnable(true) //gia na exei to focus Chart (range slider)     
                    .margin({ top: 50, right: 80, bottom: 30, left: 80 })
                    .color(["rgb(226, 144, 36)", "rgb(66, 30, 109)", "rgb(58, 112, 150)"]);
                    chart.xAxis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.y1Axis.axisLabel("Sentiment Value");

                chart.y2Axis.tickFormat(function (d) { return d3.format(',f')(d) });
                   chart.bars.forceY([0]).padData(false); 
                chart.lines.forceY([0]).padData(false);

                chart.x2Axis.tickFormat(function (d) {
                    return d3.time.format('%d/%m/%Y')(new Date(d * 1000))
                }).showMaxMin(true);

                chart.showLegend(false);

                multichart_graph = d3.select('#multichart svg');
                testdata.map(function (series) {
                series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } });
                return series;
                });

                multichart_graph.datum(testdata)
                    .transition()
                    .call(chart);

所用数据的概述是：

var testdata = [{
                 "key": "Orange line", "values": [[1279314000, -0.476492389], [1279400400, -0.4764799323],[1279486800, -0.4764816604],....]}, 
                {
                 "key": "Forecast line", "values": [[1516140000, -1.0070195523], [1516226400, 3.9973810749],...]},
                {
                "key": "Bars", "values": [[1516140000, 3], [1516226400, 2], [1516312800, 3],...],"bar": "true"}
]

Answer 1

根据您获得 NVD3 的位置，您的代码不会运行。

我用

<script src="http://nvd3.org/assets/js/nv.d3.js"></script>

这是一个不同于 github 代码的版本。此图表类型没有 chart.x2Axis。

查看代码（github和nvd3.org）条形图使用historicalBar模型来显示条形图。这使用指定为 bar 的值的 xAxis (d3.scale.linear) 域的 x 值的 d3.extent。条形图使用比例放置，但条形图的宽度为 width/data[0].values.length。如果您在组合域开始 (2010-07) 处添加一个虚拟数据点，结果将是巨大的条形图。用户无法控制条形宽度和 xScale 使用的域。

唯一的办法就是自己写图表。

数据放置在 xAxis -nvd3 上的错误日期

Data are placed on the wrong dates on xAxis -nvd3

javascript

d3.js

nvd3.js

lineplusbarchart