d3.js - 具有域外日期间隔的 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 年结束。通过在linePlusBarChartchart.lines.xDomain = [minDate, maxDate]中使用和，图表的数据也正确显示，但 x 轴没有反映更改后的最小值和最大日期。这是显示错误的图像：chart.bars.xDomain = [minDate, maxDate]

图表选项如下所示：

 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 变量添加到 domain 方法中更进一步：

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

我还必须xDomain在函数的开头添加一个公共变量。

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