d3.js - x 轴日期与 nvd3 中的 y 轴数据不一致

Question

我将 NVD3 与 Flask 一起使用，并且在 x 轴上有日期。

如您所见，x 轴上的线与点不重合。我在 x 轴上打印出日、月、年和小时。我不明白为什么日期不是等距的，即“小时”不一样，即使我的 x 轴数据是一样的，所以这些线相隔超过“24 小时”。我认为这是造成问题的原因。

（已编辑）我的代码是：

nv.addGraph(function() {
                        var chart = nv.models.lineChart();
                        chart.xAxis
                            .tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
                );
                        chart.yAxis
                            .tickFormat(d3.format(',.02f'));
                        chart.tooltipContent(function(key, y, e, graph) {
                            var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x)));
                            var y = String(graph.point.y);
                var y = String(graph.point.y);
                            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
                            return tooltip_str;
                        });
                        chart.showLegend(true);

                        d3.select('#lineChart svg')
                            .datum(data_lineChart)
                            .transition().duration(500)
                            .attr('width', 1200)
                .attr('height', 450)
                            .call(chart);

                    nv.utils.windowResize(chart.update);
                    return chart;
                });

Answer 1

这里有一个更好的建议，因为 d3 如果未声明时间刻度，则不能很好地缩放由日期表示的 x 轴。

  chart.xAxis
      .tickFormat(function(d) {
          return d3.time.format('%d-%m-%y')(new Date(d))
      });

  chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph

Answer 2

好的，我知道了！我所做的是创建一个排序的时间戳列表，这些时间戳将用作 x 轴上的数据，并将它们四舍五入到最近的一天。然后我通过执行以下操作强制 NVD3 将此数据用作间隔而不是自动生成的间隔：

 chart.xAxis
     .tickValues({{x_data}})

其中 x_data 是列表。瞧！...

Answer 3

您可以显式控制刻度的生成方式。要间隔 24 小时，代码将类似于

chart.xAxis.ticks(d3.time.day, 1);

编辑

看起来 NVD3 实际上并没有使用 D3 轴组件来生成标签，因此所有这些都没有效果。您必须修改 NVD3 的源代码才能达到您想要的效果。