d3 data transitions in AngularJS

Just whipped up a demonstration of implementing data transitions via d3 through AngularJS directives.

See it in action on on Plunker.

The directive is actually very simple:

angular.module('plunker', [])
.directive('transAttr', function () {
  return {
    link: function (scope, element, attr) {
      var d3sel = d3.select(element[0]);

      // Watch for changes in the object's values
      scope.$watchCollection(attr.transAttr, function (newAttrs) {
        // Format attribute object into entry format
        newAttrs = d3.entries(newAttrs);

        // Create a new transition
        var trans = d3sel.transition().duration(1000);

        // Apply each attribute as a transition
        newAttrs.forEach(function (attr) {
          trans.attr(attr.key, attr.value);
        });
      });
    }
  }
})

chrisirhc

d3 data transitions in AngularJS