Angularjsおよびd3.jsを使用したチャートディレクティブの作成

コアポイント

• d3.jsは、angularjsと組み合わせて使用​​してSVG（スケーラブルベクトルグラフィックス）を使用してインタラクティブなリアルタイムチャートを作成できるJavaScriptライブラリです。この組み合わせにより、開発者は動的なデータ視覚化を備えたリッチなWebアプリケーションを作成できます。
• angularjsおよびd3.jsをHTMLページに設定して、チャートディレクティブを作成できます。これには、AngularJSコントローラーと手順の作成、およびコントローラーを使用してチャートに描画するデータを保存することが含まれます。次に、この指令を使用して、d3.jsを使用して行チャートを描画できます。
• クリックをリアルタイムで更新して、基礎となるデータの変更を反映できます。これは、命令にコレクションオブザーバーを使用してコレクションデータの変更を監視し、変更が検出されたときにチャートを再描画することで実行できます。
• d3.jsは、Angularおよびその他のJavaScriptフレームワークの他のバージョンで使用できます。データの更新を処理するために使用できる強力なデータバインディングシステムを提供し、AngularJSはアプリケーションを構築し、データの更新を処理するための構造化された方法を提供します。

D3は、HTML5テクノロジースケーラブルベクトルグラフィックス（SVG）を使用してインタラクティブなチャートを作成するために使用できるJavaScriptライブラリです。 SVGでサポートされている形状を覚えていて、チャートを動的にするためにAPIを複数回呼び出す必要があるため、SVGで直接チャートを作成する必要があるため、痛みを伴う場合があります。 D3はほとんどの痛みを排除し、SVGベースのチャートを構築するための簡単なインターフェイスを提供します。 Jay Rajは、D3に精通していない場合は、2つの良いSitePointの記事を公開しています。

あなたのほとんどは、Angularjsを正式に導入する必要がないかもしれません。 AngularJSは、豊富なWebアプリケーションを構築するためのクライアント側JavaScriptフレームワークです。 AngularJSの主な利点の1つは、指示のサポートです。ディレクティブは、独自のHTML属性と要素を定義する優れた方法を提供します。また、タグとコードを互いに分離するのにも役立ちます。

AngularJSは、データバインディングにおいても非常に強力です。この機能は、モデルのデータに基づいてUIを更新するために必要な時間と労力を節約します。現代のオンラインの世界では、顧客は開発者にリアルタイムのレスポンシブWebサイトを構築するように依頼します。これは、顧客が画面上の最新のデータを常に表示したいことを意味します。誰かがバックエンドのデータを変更したら、データUIを更新する必要があります。データバインディングのサポートがない場合、このようなリアルタイムの更新を実行することは非常に困難で非効率的です。

この記事では、D3チャートをラップするリアルタイムのAngularJSディレクティブを構築する方法を学びます。

環境環境

最初に、環境をセットアップする必要があります。 HTMLページにAngularJとD3を含める必要があります。 1つのチャートディレクティブのみを構築するため、AngularJSコントローラーと1つの指令を作成する必要があります。コントローラーでは、チャートにプロットするデータを保持するコレクションが必要です。次のコードスニペットには、初期コントローラーと命令が表示されます。後でこれらのコンポーネントにさらにコードを追加します。

var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height='200' width='850'></svg>",
    link: function(scope, elem, attrs){
    }
  };
});

上記の手順にリンク関数を設定して、コントローラーに保存されているデータを使用し、D3を使用してラインチャートを描画します。指令のテンプレートには、SVG要素が含まれています。この要素にD3のAPIを適用して、チャートを描画します。次のコードスニペットには、指令の使用例が表示されます。

<div linear-chart chart-data="salesData"></div>

次に、チャートを描くために必要な基本的なデータを収集しましょう。描画するデータ、SVG要素のJavaScriptオブジェクト、およびその他の静的データが含まれます。

var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);

D3ライブラリをロードした後、D3オブジェクトはグローバル変数として使用できます。ただし、コードブロックで直接使用する場合、そのコードブロックをテストすることは困難です。ディレクティブをテスト可能にするために、オブジェクトを

で使用します。 $window

シンプルなラインチャートを描きます

チャートを描画するために必要なパラメーターを設定しましょう。チャートには、これらの軸を表すX軸、Y軸、およびデータフィールドが必要です。この例では、X軸は時間の時間を表します。配列内の最初と最後の値を取得できます。 Y軸では、可能な値はゼロから最大販売の範囲です。最大販売は

を使用して見つけることができます。軸の範囲は、SVG要素の高さと幅によって異なります。 d3.max()

上記の値を使用して、d3に目的の方向とスケールの数で軸を描く必要があります。最後に、上記で定義したスケールに基づいて線を描画するために

を使用して関数を定義する必要があります。上記のすべてのコンポーネントは、ディレクティブテンプレートのSVG要素に接続する必要があります。アイテムを添付するときに、チャートにスタイルと変換を適用できます。次のコードはパラメーターを設定し、それらをsvgに追加します：d3.svg.line()

function setChartParameters(){
  xScale = d3.scale.linear()
             .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length - 1].hour])
             .range([padding + 5, rawSvg.clientWidth - padding]);

              yScale = d3.scale.linear()
                .domain([0, d3.max(salesDataToPlot, function (d) {
                  return d.sales;
                })])
             .range([rawSvg.clientHeight - padding, 0]);

  xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

  yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

  lineFun = d3.svg.line()
              .x(function (d) {
                return xScale(d.hour);
              })
              .y(function (d) {
                return yScale(d.sales);
              })
              .interpolate("basis");
}

function drawLineChart() {

  setChartParameters();

  svg.append("svg:g")
     .attr("class", "x axis")
     .attr("transform", "translate(0,180)")
     .call(xAxisGen);

   svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,0)")
      .call(yAxisGen);

   svg.append("svg:path")
      .attr({
        d: lineFun(salesDataToPlot),
        "stroke": "blue",
        "stroke-width": 2,
        "fill": "none",
        "class": pathClass
   });
}

drawLineChart();

チャートのリアルタイムアップデート 前述のように、今日のネットワークの機能により、ユーザーは、基礎となるデータが変更されたときにすぐにデータチャートの更新を確認したいと考えています。 WebSocketなどのテクノロジーを使用して、クライアントに変更をプッシュできます。作成したばかりのチャート指令は、これらの変更に応答し、チャートを更新できる必要があります。

websocketを介してデータをプッシュするには、socket.ioおよびnode.js、SignalRおよび.NETまたはその他のプラットフォームを使用して構築されたサーバーコンポーネントが必要です。このデモでは、AngularJSの

サービスを使用して、1秒の遅延で10のランダム販売値を販売アレイにプッシュします。

$interval新しいデータがプッシュされた直後にチャートを更新するには、更新されたデータを使用してチャートを再描画する必要があります。コレクションオブザーバーは、コレクションデータの変更を監視するために指令で使用する必要があります。コレクションに変更が加えられると、オブザーバーが呼び出されます。チャートはオブザーバーで再描画されています。

$interval(function() {
  var hour = $scope.salesData.length + 1;
  var sales = Math.round(Math.random() * 100);

  $scope.salesData.push({hour: hour, sales: sales});
}, 1000, 10);

結論

scope.$watchCollection(exp, function(newVal, oldVal) {
  salesDataToPlot = newVal;
  redrawLineChart();
});

function redrawLineChart() {

  setChartParameters();
  svg.selectAll("g.y.axis").call(yAxisGen);
  svg.selectAll("g.x.axis").call(xAxisGen);

  svg.selectAll("." + pathClass)
     .attr({
       d: lineFun(salesDataToPlot)
     });
}

AngularJとD3は、Web上に豊富なビジネスアプリケーションを構築するための非常に便利なライブラリです。それらを一緒に使用して簡単なチャートを作成する方法について説明しました。この知識を拡張して、アプリケーションのチャートを作成できます。

（スペースの制限のため、FAQの部分はここで省略されています。FAQSパーツの内容は元のテキストと一致しており、書き換えは必要ありません。）

以上がAngularjsおよびd3.jsを使用したチャートディレクティブの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。