javascript - D3JS 的 AngularJS 指令是否存在？

Question

我的一个应用程序需要一些基本图表，但如果我能够及时理解它来满足项目要求，我想使用 D3JS。我仍在加深对 SVG 和 D3JS 的理解，以便能够有效地使用它，到目前为止，我已经能够制作一个非常基本的条形图，它采用二维数组并根据中每个数组的长度显示条形图。顶级数组。这非常有效(尽管它可以使用一些装饰/轴标签等)。我要处理的下一种图表是饼图，因为它们也很常见。

基本上我想知道的是，有谁知道是否有人已经完成了此操作并发布到 github(或在其他地方共享源代码)，所以我不必在这里从头开始。我意识到 D3JS 用于进行非常自定义的数据显示，但我真的只想要它的基础知识加上自定义的能力。那么是否有人知道为 D3JS 创建指令的努力和/或是否有人知道概述 D3JS 中所有基本图表类型的地方(我一直在寻找复杂的示例，它们看起来很神奇，但我担心我无法理解/从中学习) )。

基本上，我只是想有一种简单的方法来插入(然后设置样式)以下图表:条形图、折线图、饼图(欢迎我没有想到的其他标准图表类型)。我还看到了 Google Charts 和 High Charts 选项，它们都很不错，可以为您提供一些开箱即用的功能，但大多数时候我更喜欢构建方法而不是剥离方法。

此外，我知道并使用过 this article制作我需要的原始条形图(将其与 another straight D3JS tutorial 混合)，但是有人知道还有更多的努力吗？

这是迄今为止我的基本条形图:

.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 来说仍然相当陌生。

Answer 1

有 2 个关于 d3.js Angular Directive(指令)的 github 项目:

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

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