是否存在针对D3JS的AngularJS指令？

Question

是否存在针对D3JS的AngularJS指令？

我将需要一些我的应用程序的基本图表,但如果我能够及时包围它以满足项目要求,我想使用D3JS.我仍在开发我对SVG和D3JS的理解,所以我可以有效地使用它,到目前为止,我已经能够制作一个非常基本的条形图,它采用二维数组,并根据每个数组的长度显示条形图.顶级数组.这非常好用(虽然它可以使用一些装饰/轴标签等).我要处理的下一张图表是饼图,因为它们也非常常见.

基本上我想知道的是,有没有人知道是否有人已经这样做并发布到github(或在其他地方共享源代码)所以我不必从头开始.我意识到D3JS用于进行非常自定义的数据显示,但我真的只想要它的基础知识和定制能力.所有有人都意识到要为D3JS创建指令和/或任何知道D3JS中所有基本图表类型概述的人(我不断寻找复杂的例子,看起来很棒,但我担心我不会理解/从他们那里学习) ).

基本上我只想有一个简单的方法来放入(然后设计)以下图表:bar,line,pie(我不认为其他标准图表类型是受欢迎的).此外,我已经看到了谷歌图表和高图表选项,它们都很好,并且开箱即用,但是我更喜欢构建方法,而不是大多数情况下的条带化.

另外我知道并使用这篇文章来制作我需要的原始条形图(将它与另一个直接的D3JS教程混合)但是有没有人有更多的注意力？

这是我到目前为止的基本条形图:

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

Run Code Online (Sandbox Code Playgroud)

关于这段代码的任何提示/指示也是受欢迎的,因为我说D3JS仍然是一个完整的新手,而且还是Angular的新手.