按范围日期过滤 angular-nvd3 指令？

Question

我使用 angular-nvd3 指令创建了一个 nvd3 图形：

<nvd3 id="analytics-community" options="vm.community.options" data="vm.community.data" config="vm.graphConfig" class="with-3d-shadow with-transitions"></nvd3>

但是似乎无法使用 |filter:something 过滤数据属性，因为它最终会无限循环并且 angular 因无限循环错误而中断。

图形选项设置为：

vm.graphOptions = {
    chart: {
        type: 'lineChart',
        height: 300,
        margin : {
            top: 50,
            right: 50,
            bottom: 50,
            left: 50
        },
        x: function(d) {
            return d3.time.format.iso.parse(d.key);
        },
        y: function(d) {
            return d.value;
        },
        useInteractiveGuideline: false,
        dispatch: {
            stateChange: function(e) { },
            changeState: function(e) { },
            tooltipShow: function(e) { },
            tooltipHide: function(e) { }
        },
        xScale: d3.time.scale(),
        xAxis: {
            axisLabel: 'Date',
            tickFormat: function (d) {
                return d3.time.format('%b %Y')(new Date(d));
            }
        },
        yAxis: {
            axisLabel: 'Count',
            tickFormat: function(d) {
                return d;
            }
        }
    }
};

并且数据设置为：

vm.community.data = [
    {
        key: 'Members',
        values: vm.statsModel.registeredMembers
    },
    {
        key: 'Students',
        values: vm.statsModel.registeredStudents
    },
    {
        key: 'Alumni',
        values: vm.statsModel.registeredAlumni
    }
];

其中 vm.statsModel.registeredMembers 类似于：

[
  {
    key: "2015-06-15",
    value: 458
  },
  {
    key: "2015-06-23",
    value: 459
  },
  {
    key: "2015-06-27",
    value: 460
  }
]

有什么想法吗？

Answer 1

在 vm.graphOptions.chart 中设置 xDomain 有效：

vm.graphOptions.chart.xDomain = [new Date(vm.selectedItem.date), dateToday]

其中 vm.selectedItem.date = new Date().setMonth(new Date().getMonth() - 6) 表示 6 个月前...并且 dateToday = new Date()

所以我只是 $watch vm.selectedItem 上的变化，它随着 select 框变化并更新 xDomain。

按范围日期过滤 angular-nvd3 指令？

Filter by range date for angular-nvd3 directive?

angularjs

d3.js

nvd3.js

angular-nvd3