javascript - 将 EmberJS D3 图表转换为 AngularJS

Question

Ember Charts是一个非常漂亮的图表库，构建于 D3 。我使用 Angular 作为我的主要库，我想将其移植到 Angular。我的问题是如何将一些 Ember.compute 属性转换为 Angular 风格的观察者。

因此，以使用 trim 函数为例，Embers 实现如下所示:

  Ember.Charts.Helpers = Ember.Namespace.create({
    groupBy: function(obj, getter) {
        var group, index, key, result, value, _i, _ref;
        result = {};
        for (index = _i = 0, _ref = obj.length; 0 <= _ref ? _i < _ref : _i > _ref; index = 0 <= _ref ? ++_i : --_i) {
            value = obj[index];
            key = getter(value, index);
            group = result[key] || (result[key] = []);
            group.push(value);
        }
        return result;
    },
    LabelTrimmer: Ember.Object.extend({
        getLabelSize: function(d, selection) {
            return 100;
        },
        getLabelText: function(d, selection) {
            return d.label;
        },
        trim: Ember.computed(function() {
            var getLabelSize, getLabelText;
            getLabelSize = this.get('getLabelSize');
            getLabelText = this.get('getLabelText');
            return function(selection) {
                return selection.text(function(d) {
                    var bbW, charWidth, label, numChars, textLabelWidth;
                    bbW = this.getBBox().width;
                    label = getLabelText(d, selection);
                    if (!label) {
                        return '';
                    }
                    charWidth = bbW / label.length;
                    textLabelWidth = getLabelSize(d, selection) - 4 * charWidth;
                    numChars = Math.floor(textLabelWidth / charWidth);
                    if (numChars - 3 <= 0) {
                        return '...';
                    }
                    else if (bbW > textLabelWidth) {
                        return label.slice(0, numChars - 3) + '...';
                    }
                    else {
                        return label;
                    }
                });
            };
        }).property('getLabelSize', 'getLabelText')
    })
});

我将其转换为 Angular factory，如下所示:

return app.factory('Charts.Helpers', function () {

    var factory = {

        groupBy: function (obj, getter) {
            var group, index, key, result, value, _i, _ref, result = {};

            for (index = _i = 0, _ref = obj.length; 0 <= _ref ? _i < _ref : _i > _ref; index = 0 <= _ref ? ++_i : --_i) {
                value = obj[index];
                key = getter(value, index);
                group = result[key] || (result[key] = []);
                group.push(value);
            }

            return result;
        },

        LabelTrimmer: {

            getLabelSize: function (d, selection) {
                return 100;
            },

            getLabelText: function (d, selection) {
                return d.label;
            },

            trim: function (selection){
                return selection.text(function (d) {
                    var bbW, charWidth, label, numChars, textLabelWidth;
                    bbW = this.getBBox().width;
                    label = factory.getLabelText(d, selection);

                    if (!label) {
                        return '';
                    }

                    charWidth = bbW / label.length;
                    textLabelWidth = factory.getLabelSize(d, selection) - 4 * charWidth;
                    numChars = Math.floor(textLabelWidth / charWidth);

                    if (numChars - 3 <= 0) {
                        return '...';
                    }
                    else if (bbW > textLabelWidth) {
                        return label.slice(0, numChars - 3) + '...';
                    }
                    else {
                        return label;
                    }
                });
            }
        }
    };

    return factory;
});

但我不确定如何让 trim 函数来监听这些属性的更改。有任何反馈、想法吗？移植起来很愚蠢？

Answer 1

最终选择了dc-js并使用angular dc-js directive 。更灵活，更多图表。不过想知道如何模仿 Angular 计算。