带有数据过滤器的Angularjs d3自定义指令答案

【问题标题】：Angularjs d3 custom directive with filter on data带有数据过滤器的Angularjs d3自定义指令
【发布时间】：2015-01-22 09:03:29
【问题描述】：

我是 AngularJS 和 D3.js 的新手。我想用一些数据构建一个柱状图。我正在关注Cloudspace 教程，并且能够成功构建图表。

现在我想尝试领先一步。我的控制器中的数据如下：

$scope.myData = [
    {'name': 'AngularJS', '#count': '300'},
    {'name': 'D3.JS', '#count': '150'},
    {'name': 'jQuery', '#count': '400'},
    {'name': 'Backbone.js', '#count': '300'},
    {'name': 'Ember.js', '#count': '100'}
];

我还编写了自己的自定义过滤器：

App.filter('filterMyData', function() {
    return function(data, filterFor) {
        var property = Object.keys(filterFor)[0];
        var result = [];
        for (var i = 0; i < data.length; i++) {
            if (data[i][property].indexOf(filterFor[property]) > -1) {
                result.push(data[i]);
            }
        }
        return result;
    };
});

现在如何在运行时使用过滤后的数据构建图表？我不想在指令代码中硬编码我的过滤器值。在我的 html 中，它应该是：

<my-bar data="myData | filterMyData:{'#count': '300'}"></my-bar>

或

<my-bar data="myData" filter="{'#count': '300'}"></my-bar>

我搜索了很多，但找不到任何合适的解决方案。我可能做错了，因此请纠正我或建议我。

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

这更像是一个建议而不是一个解决方案，但如果你只想绘制条形图，我认为你应该看看https://github.com/cmaurer/angularjs-nvd3-directives。它大大简化了 D3.js 设置。

使用它，您可以在将模型用于指令之前对其进行过滤。对于您的过滤问题，有几种解决方案，例如：

$scope.getData = function () {
    return $filter('filterMyData')($scope.myData, '300');
};

在你的指令上

<my-bar data="getData()"></my-bar>

【讨论】：

"使用它，您可以在将模型用于指令之前对其进行过滤。" - 你能给我一些例子或告诉我这方面的方向吗？