Question

我是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>

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

Answer 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>

Angularjs d3自定义指令，带有对数据的过滤

1 个答案: