Do AngularJS Directives for D3JS exist?

Question

I'm going to need some basic charts for one of my apps, but I would like to use D3JS if I'm able to wrap my head around it in time to fulfill the project requirements. I'm still developing my understanding of SVG and D3JS so I can use it effectively, so far I've been able to make a very basic bar chart that takes 2 dimensional arrays and shows bar charts based on the length of each array in the top level array. This works pretty darn well (though it could use some decoration/axis labels etc.). The next kind of chart I was going to work on is a pie chart since these are very common as well.

Basically what I'm wondering is, does anyone know if someone has already done this and posted to github (or shared the source elsewhere) so I don't have to start from scratch here. I realize D3JS is used for doing very custom data display but I really just want it for the basics plus the ability to customize. So is anyone aware of an effort to create directives for D3JS and/or anyone aware of somewhere that outlines all the basic chart types in D3JS (I keep finding complex examples, which look amazing but I fear I won't understand/learn from them).

Basically I would just like to have an easy way to drop in (and then style) the following charts: bar, line, pie (other standard chart types I'm not thinking of are welcome). Also I have seen the Google Charts and High Charts options, which are both nice and give you a bit of this out of the box, but I prefer a build up approach rather than a strip down most of the time.

Also I'm aware of and used this article to make the original bar graph I needed (mixing it with another straight D3JS tutorial) but are there more efforts anyone is aware of?

Here's my basic bar chart so far:

.directive('barChart', function ( /* dependencies */ ) {
  // define constants and helpers used for the directive

  var width = 500,
    height = 80;

  return {
    restrict: 'E', // the directive can be invoked only by using <bar-chart></bar-chart> tag in the template
    scope: { // attributes bound to the scope of the directive
      val: '='
    },
    link: function (scope, element, attrs) {
      // initialization, done once per my-directive tag in template. If my-directive is within an
      // ng-repeat-ed template then it will be called every time ngRepeat creates a new copy of the template.

      // set up initial svg object
      var vis = d3.select(element[0])
        .append("svg")
          .attr("class", "chart")
          .attr("width", width)
          .attr("height", height);


      // whenever the bound 'exp' expression changes, execute this 
      scope.$watch('val', function (newVal, oldVal) {

        // clear the elements inside of the directive
        vis.selectAll('*').remove();

        // if 'val' is undefined, exit
        if (!newVal) {
          return;
        }

        var totalDataSetSize = 0;

        for (var i = 0; i < newVal.length; i++) {
          totalDataSetSize += newVal[i].length
        };

        function calcBarWidth(d) {
          return (totalDataSetSize==0)?0:d.length/totalDataSetSize*420;
        }

        vis.selectAll("rect")
            .data(newVal)
          .enter().append("rect")
            .on("click", function(d,i) {alert("Total gardens: "+ d.length)})
            .attr("y", function(d, i) { return i*20; })
            .attr("width", calcBarWidth)
            .attr("height", function(d) {return 20});

        vis.selectAll("text")
            .data(newVal)
          .enter().append("text")
            .attr("x", function(d) { return calcBarWidth(d)+50})
            .attr("y", function(d, i) { return (i+1)*20; })
            .attr("dx", -3) // padding-right
            .attr("dy", "-.3em") // vertical-align: middle
            .style("font-size", ".7em")
            .attr("fill", "black")
            .attr("text-anchor", "end") // text-align: right
            .text(function(d,i){ var yesOrNo = i?" No":" Yes"; return d.length.toString() + yesOrNo})

      },true);
    }
  };
});

Any tips/pointers on this code are welcome as well, as I said still a complete novice with D3JS and still fairly new to Angular.

Answer 1

There are 2 github projects about angular directive for d3.js:

https://github.com/robinboehm/angular-d3-directives

https://github.com/cmaurer/angularjs-nvd3-directives