web-dev-qa-db-ja.com

D3JSのAngularJSディレクティブはありますか？

アプリの1つにいくつかの基本的なグラフが必要になりますが、プロジェクトの要件を満たすために時間内に頭を回せる場合は、D3JSを使用したいと思います。私はまだSVGとD3JSの理解を深めているので、SVGとD3JSを効果的に使用できるようになりました。これまでのところ、2次元配列を取り、各配列の長さに基づいて棒グラフを表示する非常に基本的な棒グラフを作成できました。トップレベルの配列。これはかなりうまくいきます（ただし、いくつかの装飾/軸ラベルなどを使用できます）。次の種類のグラフは非常に一般的であるため、円グラフです。

基本的に私が思っているのは、誰かがすでにこれを行ってgithubに投稿した（またはソースを他の場所で共有した）かどうかを誰かが知っているので、ここから一から始める必要はありません。私はD3JSが非常にカスタムなデータ表示を行うために使用されていることに気づきましたが、私は本当にそれを基本に加えてカスタマイズする機能のためだけに望んでいます。したがって、D3JSのディレクティブを作成しようとする努力を知っている人や、D3JSのすべての基本的なチャートタイプの概要を説明している人を知っている人もいます（私は複雑に見える例を見つけ続けますが、見た目は素晴らしいですが、理解できない/恐れる）。

基本的に、棒グラフ、折れ線グラフ、円グラフ（私が考えていない他の標準的なグラフの種類は歓迎されます）のグラフを簡単にドロップ（そしてスタイル設定）する方法が欲しいです。また、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にはかなり新しいと言いました。

javascriptangularjsd3.js
21
shaunhusain

Angular JSでのD3.jsの使用については、この記事をチェックアウトしてください=> http://www.ng-newsletter.com/posts/d3-on-angular.html =

19
DashingD3js

angularディレクティブに関する2つのgithubプロジェクトがあります：

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

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

6
Ben

うーん大丈夫、明らかに私の最初の研究はそれほど良くなかった、私はちょうどこれが私が欲しいものをカバーしているように見えるこれに出会った：

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

それでも選択肢がある場合、私はそれらを聞いたり見たりすることもできます。翌日より良い応答がない場合は、この回答を受け入れます。

--------------------------編集1

また、プロトタイプがここで使用されている理由を誰かが知っている場合は、依存関係を削除しようとするつもりです。不要な場合はコードを追加しないほうがよいからです。

--------------------------編集2

トピックについてさらに読むと、AngularJSコードからD3コードを抽象化/分離するためにクラス設定を持つ他のいくつかのサンプルがあります（拡張を可能にすることは私が見た1つの引数です）。

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

4
shaunhusain

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

dangle.js もあります。 elasticsearchの結果を想定していますが、率直に言って、他の多くのユースケースで使用できるほど堅牢です。

2
varun

AngularJSがブートストラップと同じようにd3を統合できればいいのですが。このトピックには新しいことは何もありません（angular＆d3）。 d3ディレクティブのほとんど（nvd3を除く）は2年前のものです。これは別の 2013年の記事 ですが、アイデアはより持続可能です。最新のd3は計算にのみ使用します。そして、DOM操作にネイティブangularを使用します。欠点は、このアプローチではトランジションを実行できなかったことです。

0
KIC