コアポイント

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

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

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

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

この記事では、D3チャートをラップするリアルタイムのAngularJSディレクティブを構(gòu)築する方法を?qū)Wびます。

環(huán)境環(huán)境

最初に、環(huán)境をセットアップする必要があります。 HTMLページにAngularJとD3を含める必要があります。 1つのチャートディレクティブのみを構(gòu)築するため、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){
    }
  };
});

上記の手順にリンク関數(shù)を設(shè)定して、コントローラーに保存されているデータを使用し、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オブジェクトはグローバル変數(shù)として使用できます。ただし、コードブロックで直接使用する場合、そのコードブロックをテストすることは困難です。ディレクティブをテスト可能にするために、オブジェクトを

で使用します。 $window

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

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

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

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

を使用して関數(shù)を定義する必要があります。上記のすべてのコンポーネントは、ディレクティブテンプレートのSVG要素に接続する必要があります。アイテムを添付するときに、チャートにスタイルと変換を適用できます。次のコードはパラメーターを設(shè)定し、それらを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();

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

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

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

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

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

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

結(jié)論

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上に豊富なビジネスアプリケーションを構(gòu)築するための非常に便利なライブラリです。それらを一緒に使用して簡単なチャートを作成する方法について説明しました。この知識を拡張して、アプリケーションのチャートを作成できます。

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

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