D3.js结合Angular.js制作图表

在Angular中使用D3制作图表，我们可以根据图表的种类创建不同的指令和对应的服务。比如创建一个柱状图时，我们在模块下创建一个barChart指令：

myComponents.directive('barChart', function($compile) {
    'use strict';

    return {
        restrict: 'AE',
        scope: {
            chartTitle: "@",        //图表标题
            series: "=",            //图标的数据
            height: "=?height"      //图表的高度
        },
        controller: function(initBarChart, $scope, $element, $attrs) {
            $scope.height = $scope.height || 200;   //如果高度未定义，则使用默认值200

            var _chart = initBarChart($scope);      //使用服务

            var _chartBody = $element.find(".chart-body");  //获取图表的容器
            _chartBody.height($scope.height);       //设置容器的高度

            _chart.generate($element.find(".chart-body"), $scope.series, {      //使用服务提供的方法生成图表
                height: $scope.height,
            });

            //Do something here...
            
        },
        template: '<div class="chart">' + '<div class="chart-header">' + '<h3>{{chartTitle}}</h3>' + 
                    '</div>' + '<div class="chart-body">' + '</div>' + '</div>',
        replace: true
    };
});

对应的initBarChart服务：

myComponents.service('initBarChart', function() {
    'use strict';

    var charts = function($scope) {
        return {
            generate: function(ele, series, config) {
                ele = $(ele);
                series = series || [];
                config = config || {};
                
                 d3.select(id).selectAll('.svg_barchart').remove();
                //添加svg元素
                var svg = d3.select(id).append("svg")
                    .attr('class', 'svg_barchart')
                //Do something here...
            },
        };
    return charts;
});

我们只需要把D3制作柱状图的关键代码放到generate方法中就可以了。

在页面中使用这个指令：

<div bar-chart height="300" chart-title="操作次数"  data-series="operationSeries"></div>

然后在作用范围包含这个节点的$scope中定义变量operationSeries，用于传递图表中要显示的数据或者配置参数。

监听图表数据的变化

使用Ajax获取数据并进行处理后，发现图表显示不出来。在Chrome的ng-inspect插件中看到$scope.series是有数据的，但是图表中获取不到这个series的值。后来想到可能是图表绘制的时候，series的数据还没有处理好。

于是决定在指令对应的控制器中，使用$watch监听series变量的变化：

//检测数据变化，更新图表 
$scope.$watch('series', function(newData, oldData){
    if(!angular.equals(newData,oldData)){
       _chart.generate($element.find(".chart-body"), newData, {
            height: $scope.height,
        });
    }
}, true);