具有域外日期间隔的 LinePlusBarChart

Question

我正在使用 angular-nvd3 的 LinePlusBarChart 来显示一些数据，非常像这样：

http://plnkr.co/edit/mrkvM1ihrVRN9jdBFWiF?p=preview

在上面的示例中，x 轴域基于数据的日期值。

如何在 linePlusBarChart 中将 x 轴的日期间隔更改为从 2000 年开始一直持续到 2015 年，即使 2000 年到 2004 年之间没有可用数据？

更新：对于普通折线图，设置chart.xDomain = [minDate, maxDate]就可以了。图表正确显示数据，图表 x 轴从 2000 年开始到 2015 年结束。通过在 linePlusBarChart 中使用 chart.lines.xDomain = [minDate, maxDate] 和 chart.bars.xDomain = [minDate, maxDate] 的数据该图表也正确显示，但 x 轴未反映更改的最小和最大日期。这是显示错误的图像：

图表选项如下所示：

 chart: {
            type: 'linePlusBarChart',
            height: 300,
            margin: {
                top: 30,
                right: 75,
                bottom: 50,
                left: 75
            },
            bars: {
                forceY: [0]
            },
            color: ['#2ca02c', 'darkred'],
            x: function(d,i) { return i },
            xAxis: {
                axisLabel: 'X Axis',
                tickFormat: function(d) {
                    var dx = $scope.data[0].values[d] && $scope.data[0].values[d].x || 0;
                    if (dx > 0) {
                        return d3.time.format('%x')(new Date(dx))
                    }
                    return null;
                }
            },
            y1Axis: {
                tickFormat: function(d){
                    return d3.format(',f')(d);
                }
            },
            y2Axis: {
                tickFormat: function(d) {
                    return '$' + d3.format(',.2f')(d)
                }
            },
            focusEnable: false
        }

Answer 1

我发现问题出在 nvd3 库中。 xDomain 从未在 nv.models.linePlusBarChart 函数中得到尊重。我不得不通过添加以下行将 xDomain 拉入 chart._options：

xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},

然后我将 xDomain 变量添加到更上层的域方法中：

x2 .domain(xDomain || d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))

我还必须在函数开头添加 xDomain 作为 public 变量。

现在 x 轴刻度标签随数据一起更改。

具有域外日期间隔的 LinePlusBarChart

LinePlusBarChart with date interval outside domain

d3.js

nvd3.js

angular-nvd3