EmberJS D3 차트를 AngularJS로 변환

Question

Ember Charts은 D3에 빌드 된 정말 매끄러운 차트 라이브러리입니다. 내 기본 라이브러리로 Angular를 사용하고 있으며 이것을 Angular로 이식하고 싶습니다. 내 질문은 어떻게 Ember.compute 속성 중 일부를 각도 스타일 워처 변환합니다. 나는 같은 각도 factory로 변환

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

:

는 그래서 trim 기능이 예를 들자면, 같은 불씨 구현 보인다

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을 사용했습니다. 더 유연하고 더 많은 차트. 그래도 계산을 모방하는 방법에 대해 알고 싶습니다.