D3JS 的 AngularJS 指令是不是存在？

Posted 2023-02-22

【中文标题】D3JS 的 AngularJS 指令是不是存在？

【英文标题】：Do AngularJS Directives for D3JS exist?D3JS 的 AngularJS 指令是否存在？

【发布时间】：2013-09-14 12:44:02

【问题描述】：

我的一个应用程序需要一些基本图表，但如果我能够及时了解它以满足项目要求，我想使用 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 来说还是相当新的。

【问题讨论】：

不是角度指令，但NVD3 包含许多基本和更高级的图表类型，您可以将它们包装在此类指令中。

你检查过n3-charts.github.io/line-chart 吗？

查看 nvD3.js 的 angular-nvd3 指令。该指令是可重用的，并且可以通过 JSON 与完整的 nvd3 api 交互。

【参考方案1】：

嗯，好吧，显然我最初的研究不是那么好，我刚刚发现了这个，它看起来涵盖了我想要的：

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

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

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

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

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

继续阅读该主题，还有一些其他示例也有一个类设置，目的是从 AngularJS 代码中抽象/分离 D3 代码（允许扩展是我见过的一个论点）。

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

【参考方案2】：

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

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

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

【讨论】：

github.com/cmaurer/angularjs-nvd3-directives 对我来说效果很好 - 感谢您的链接！

注意：github.com/robinboehm/angular-d3-directives 的最新提交是在 2013 年。

只想指出 n3-charts.github.io/line-chart/# 仅支持 d3js v3.x。它不支持 d3js v4。

【参考方案3】：

我已经构建了一个set of extensible directives 用于使用 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>

【参考方案4】：

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

【参考方案5】：

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