Question

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

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

基本上我只想有一个简单的方法来放入（然后设计）以下图表：bar，line，pie（我不认为其他标准图表类型是受欢迎的）。此外，我已经看到了谷歌图表和高图表选项，它们都很好，并且可以为您提供一些开箱即用的功能，但我更喜欢构建方法而不是大部分时间的条带化。

我也知道并使用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

关于在Angular JS中使用D3.js，请查看本文=＆gt; http://www.ng-newsletter.com/posts/d3-on-angular.html

Answer 2

有关于d3.js的角度指令的2个github项目：

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

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

Answer 3

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

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

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

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

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

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

更多地阅读这个主题还有一些其他样本也有一个类设置，目的是从AngularJS代码中抽象/解耦D3代码（允许扩展是我见过的一个参数）。

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

Answer 4

我使用D3构建了一个set of extensible directives来构建图表。它们非常灵活，我已经广泛使用它们。您可以从Bower以及＃34; angularD3＆＃34;。

获得包裹

基本思想是以声明方式构建图表，同时仍然允许访问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 5

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

Answer 6

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

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

6 个答案: