Существуют ли директивы AngularJS для D3JS?

Мне понадобятся некоторые базовые диаграммы для одного из моих приложений, но я бы хотел использовать D3JS, если мне удастся обогнуть его вовремя, чтобы выполнить требования к проекту. Я по-прежнему развиваю свое понимание SVG и D3JS, поэтому могу эффективно использовать его, до сих пор я смог создать очень базовую гистограмму, которая берет 2-мерные массивы и показывает гистограммы, основанные на длине каждого массива в массив верхнего уровня. Это очень хорошо работает (хотя он может использовать некоторые метки украшения/оси и т.д.). Следующий вид диаграммы, на которой я собирался работать, - это круговая диаграмма, так как они также очень распространены.

В основном, мне интересно, кто-нибудь знает, если кто-то уже это сделал и отправил в github (или поделился источником в другом месте), поэтому мне не нужно начинать с нуля здесь. Я понимаю, что D3JS используется для отображения пользовательских данных, но я просто хочу, чтобы это было основополагающим, а также возможностью настройки. Так кто знает об усилиях по созданию директив для D3JS и/или тех, кто знает о чем-то, где описываются все основные типы диаграмм в D3JS (я продолжаю находить сложные примеры, которые выглядят потрясающе, но я боюсь, что я не буду понимать/учиться у них).

В принципе, я просто хотел бы иметь простой способ зайти (а затем стиль) следующие диаграммы: bar, line, pie (другие стандартные типы диаграмм, о которых я не думаю, приветствуются). Также я видел варианты Google Charts и High Charts, которые оба хороши и дают вам немного этого из коробки, но чаще всего предпочитаю наращивание, а не полосу в большинстве случаев.

Также я знаю и использовал эту статью, чтобы сделать исходную гистограмму, которая мне нужна (смешение с другим прямой учебник 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);
    }
  };
});

Любые советы/указатели на этот код также приветствуются, поскольку я сказал, что все еще новичок с D3JS и до сих пор довольно новичок в Angular.

Ответы

 <d3-data src="data/data.csv" data="line" columns="year, savings, total, optimal"></d3-data>
 <d3-data src="data/donutData.csv" data="pie" columns="age,population"></d3-data>
 <div d3-chart>
   <d3-axis data="line" name="year" label="Year" extent="true" orientation="bottom" ticks="5"></d3-axis>
   <d3-axis data="line" name="savings" label="Deposits" orientation="left" ticks="5"></d3-axis>
   <d3-axis data="line" name="total" label="Savings" orientation="right" ticks="5"></d3-axis>
   <d3-line data="line" x="year" y="optimal" yscale="total"></d3-line>
 </div>