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

Angularjs d3 custom directive with filter on data

本文关键字：数据 过滤器 d3 自定义 指令 Angularjs      更新时间：2023-09-26

我是AngularJS和D3.js的新手。我想用一些数据构建一个条形柱图。我正在遵循云空间教程，并能够成功构建图形。

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

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

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

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

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

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

并根据您的指示

<my-bar data="getData()"></my-bar>
相关文章：