核心要點(diǎn)

• D3.js是一個(gè)JavaScript庫(kù)，可與AngularJS結(jié)合使用，利用SVG（可縮放矢量圖形）創(chuàng)建交互式實(shí)時(shí)圖表。這種組合允許開發(fā)人員創(chuàng)建具有動(dòng)態(tài)數(shù)據(jù)可視化的豐富Web應(yīng)用程序。
• AngularJS和D3.js可以在HTML頁(yè)面中設(shè)置，以創(chuàng)建圖表指令。這包括創(chuàng)建AngularJS控制器和指令，並使用控制器保存要在圖表中繪製的數(shù)據(jù)。然後，可以使用該指令使用D3.js繪製折線圖。
• 可以實(shí)時(shí)更新圖表以反映底層數(shù)據(jù)的變化。這可以通過在指令中使用集合觀察器來監(jiān)視集合數(shù)據(jù)的變化，然後在檢測(cè)到變化時(shí)重新繪製圖表來實(shí)現(xiàn)。
• D3.js可與其他版本的Angular和其他JavaScript框架一起使用。它提供了一個(gè)強(qiáng)大的數(shù)據(jù)綁定係統(tǒng)，可用於處理數(shù)據(jù)更新，而AngularJS提供了一種構(gòu)建應(yīng)用程序和處理數(shù)據(jù)更新的結(jié)構(gòu)化方法。

D3是一個(gè)JavaScript庫(kù)，可用於使用HTML5技術(shù)可縮放矢量圖形(SVG)創(chuàng)建交互式圖表。直接使用SVG創(chuàng)建圖表可能會(huì)很痛苦，因?yàn)樾枰涀VG支持的形狀，並多次調(diào)用API才能使圖表動(dòng)態(tài)化。 D3消除了大部分痛苦，並提供了一個(gè)簡(jiǎn)單的界面來構(gòu)建基於SVG的圖表。 Jay Raj在使用D3方面發(fā)表了兩篇不錯(cuò)的SitePoint文章，如果您還不熟悉D3，可以查看一下。

你們中的大多數(shù)人可能不需要對(duì)AngularJS進(jìn)行正式介紹。 AngularJS是一個(gè)用於構(gòu)建豐富Web應(yīng)用程序的客戶端JavaScript框架。 AngularJS最主要的優(yōu)點(diǎn)之一是對(duì)指令的支持。指令提供了一種極好的方法來定義我們自己的HTML屬性和元素。它還有助於將標(biāo)記和代碼彼此分開。

AngularJS在數(shù)據(jù)綁定方面也非常強(qiáng)大。此功能節(jié)省了根據(jù)模型中的數(shù)據(jù)更新UI所需的大量時(shí)間和精力。在現(xiàn)代網(wǎng)絡(luò)世界中，客戶要求開發(fā)人員構(gòu)建實(shí)時(shí)響應(yīng)的網(wǎng)站。這意味著客戶希望始終在屏幕上看到最新的數(shù)據(jù)。一旦有人修改了後端的數(shù)據(jù)，就必須更新數(shù)據(jù)UI。如果我們沒有數(shù)據(jù)綁定的支持，執(zhí)行此類實(shí)時(shí)更新將非常困難且效率低下。

在本文中，我們將了解如何構(gòu)建包裝D3圖表的實(shí)時(shí)AngularJS指令。

環(huán)境設(shè)置

首先，我們需要設(shè)置環(huán)境。我們需要在HTML頁(yè)面中包含AngularJS和D3。因?yàn)槲覀冎粯?gòu)建一個(gè)圖表指令，所以我們需要?jiǎng)?chuàng)建一個(gè)AngularJS控制器和一個(gè)指令。在控制器中，我們需要一個(gè)保存要在圖表中繪製數(shù)據(jù)的集合。以下代碼片段顯示了初始控制器和指令。稍後我們將向這些組件添加更多代碼。

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){
    }
  };
});

我們將填充上述指令中的link函數(shù)，以使用控制器中存儲(chǔ)的數(shù)據(jù)並使用D3繪製折線圖。指令的模板包含一個(gè)svg元素。我們將對(duì)這個(gè)元素應(yīng)用D3的API來繪製圖表。以下代碼片段顯示了指令的一個(gè)示例用法：

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

現(xiàn)在，讓我們收集繪製圖表所需的基本數(shù)據(jù)。它包括要繪製的數(shù)據(jù)、SVG元素的JavaScript對(duì)象和其他靜態(tài)數(shù)據(jù)。

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庫(kù)後，d3對(duì)象將作為全局變量可用。但是，如果我們直接在代碼塊中使用它，則很難測(cè)試該代碼塊。為了使指令可測(cè)試，我通過$window使用該對(duì)象。

繪製簡(jiǎn)單的折線圖

讓我們?cè)O(shè)置繪製圖表所需的參數(shù)。圖表需要一個(gè)x軸、一個(gè)y軸以及表示這些軸的數(shù)據(jù)域。在這個(gè)例子中，x軸表示小時(shí)的時(shí)間。我們可以取數(shù)組中的第一個(gè)和最後一個(gè)值。在y軸上，可能的值從零到銷售額的最大值?？梢允褂?code>d3.max()找到最大銷售額。軸的範(fàn)圍根據(jù)svg元素的高度和寬度而變化。

使用上述值，我們需要讓d3繪製具有所需方向和刻度數(shù)的軸。最後，我們需要使用d3.svg.line()定義一個(gè)函數(shù)，該函數(shù)根據(jù)我們上面定義的比例繪製線條。所有上述組件都必須附加到指令模板中的svg元素。我們?cè)诟郊禹?xiàng)目時(shí)可以將樣式和轉(zhuǎn)換應(yīng)用於圖表。以下代碼設(shè)置參數(shù)並附加到SVG：

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();

實(shí)時(shí)更新圖表

如前所述，憑藉當(dāng)今網(wǎng)絡(luò)的能力，我們的用戶希望在底層數(shù)據(jù)發(fā)生變化時(shí)立即看到數(shù)據(jù)圖表更新。可以使用WebSocket等技術(shù)將更改的信息推送到客戶端。我們剛剛創(chuàng)建的圖表指令應(yīng)該能夠響應(yīng)這些更改並更新圖表。

為了通過WebSocket推送數(shù)據(jù)，我們需要使用Socket.IO與Node.js、SignalR與.NET或其他平臺(tái)上的類似技術(shù)構(gòu)建的服務(wù)器組件。在本演示中，我使用AngularJS的$interval服務(wù)以一秒的延遲將十個(gè)隨機(jī)的銷售值推入銷售數(shù)組：

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

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

為了在新數(shù)據(jù)被推送後立即更新圖表，我們需要使用更新後的數(shù)據(jù)重新繪製圖表。必須在指令中使用集合觀察器來監(jiān)視集合數(shù)據(jù)的更改。當(dāng)對(duì)集合進(jìn)行任何更改時(shí)，都會(huì)調(diào)用觀察器。圖表在觀察器中重新繪製。

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)
     });
}

結(jié)論

AngularJS和D3是用於在Web上構(gòu)建豐富的業(yè)務(wù)應(yīng)用程序的非常有用的庫(kù)。我們討論瞭如何將它們一起使用來創(chuàng)建一個(gè)簡(jiǎn)單的圖表。您可以擴(kuò)展此知識(shí)來創(chuàng)建應(yīng)用程序的圖表。

(由於篇幅限制，此處省略了FAQs部分。 FAQs部分內(nèi)容與原文一致，無需改寫。)

以上是使用AngularJS和D3.JS創(chuàng)建圖表指令的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！