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

Question

我将需要一些我的应用程序的基本图表，但如果我能够及时包围它以满足项目要求，我想使用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);
    }
  };
});

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

Answer 1

关于d3.js有两个关于angular指令的github项目：

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

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

Answer 2

嗯，好吧，显然我最初的研究并不是那么好，我刚刚看到它看起来像它涵盖了我想要的东西：

http://phloxblog.in/angulard3/start.html#.Ui9XPBKJB-M

如果有其他选择，我仍然愿意听取/看到它们。 如果我在第二天没有看到任何更好的回复，我会接受这个答案。

--------------------------编辑1

此外，如果有人知道为什么在这里使用原型我想知道我将尝试删除对它的依赖，因为如果我不需要它我宁愿不引入更多的代码。

--------------------------编辑2

再读一下这个主题还有一些其他的样本，它们也有一个类设置，用于抽象/解耦D3代码和AngularJS代码（允许扩展是我见过的一个参数）。

http://bl.ocks.org/biovisualize/5372077

Answer 3

我已经构建了一组可扩展的指令，用于使用D3构建图表。 它们非常灵活，我已经广泛使用它们。 您可以从Bower获得包装以及“angularD3”。

基本思想是以声明方式构建图表，同时仍然允许访问D3的更强大的方面，并为进一步开发自定义指令提供可扩展性。

根指令<d3-chart>充当各种图表组件的容器和控制器，如轴，线，区域，弧，渐变等d3ChartController允许您轻松编写自己的自定义图表指令。 我们自己将它用于一些专门的自定义标签等。

这是一个如何声明事物的示例：

 <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>

Answer 4

还有dangle.js 。 它应该用于弹性搜索结果，但坦率地说它足够强大，你可以将它用于许多其他用例。

Answer 5

如果AngularJS可以像使用bootstrap那样集成d3，我会很高兴。 这个主题真的没有什么新东西（angular＆d3）。 大多数d3指令（除了nvd3）都已有两年了。 这是2013年的另一篇文章，但这个想法更具可持续性。 您只能使用最新的d3进行计算。 并且你使用原生角度进行dom操作。 缺点是，我无法通过这种方法运行转换。