將EmberJS D3圖表轉換爲AngularJS

Question

Ember Charts是一個建立在D3上的非常漂亮的圖表庫。我正在使用Angular作爲我的主要庫，並且我想將其轉移到Angular。我的問題是如何將一些Ember.compute屬性轉換爲Angular風格的觀察者。

因此，採取與trim功能這個例子中，餘燼實現的樣子：

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') 
    }) 
}); 

我把它轉換成一個角度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。更靈活，更多圖表。想知道如何模仿角度計算雖然。