获取数据到 Mean.js 应用程序上 D3.js 的 AngularJS 指令

Question

我正在尝试将 D3.js 集成到 Mean.js crud 模块中。 如果我删除 mean.js 创建的标准列表控制器并将其替换为示例控制器中的示例硬编码数据，则此处的示例 creating-charting-directives-using-angularjs-d3-js 可以正常工作。

我不知道如何将数据库中的真实数据与 D3 指令集成。我应该注入模块服务吗？
顺便说一句，我使用的是 0.4.2 版本的 Mean.js

这是标准的 Meanjs 列表控制器。

(function () {
  'use strict';

 angular
.module('charts')
.controller('ChartsListController', ChartsListController);

ChartsListController.$inject = ['ChartsService', '$scope'];

function ChartsListController(ChartsService, $scope) {
var vm = this;

vm.charts = ChartsService.query();

}

})();

这是 D3 指令

(function () {
  'use strict';

   angular
   .module('charts')
   .directive('linearChart', linearChart);

   linearChart.$inject = [ '$window'];

  function linearChart($window) {

    return{
      transclude:true,
      restrict: 'EA',
      template: '<svg width='850' height='200'></svg>',
       link: function postLink(scope, elem, attrs){                          
       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');
        var svg = d3.select(rawSvg[0]);


        function setChartParameters(){

      xScale = d3.scale.linear()
         .domain([chartData[0].hour, chartData[chartData.length-1].hour])
         .range([padding + 5, rawSvg.attr('width') - padding]);

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

      xAxisGen = d3.svg.axis()
         .scale(xScale)
         .orient('bottom')
         .ticks(chartData.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(chartData),
           'stroke': 'blue',
           'stroke-width': 2,
           'fill': 'none',
           'class': pathClass
         });
    }

    drawLineChart();
  }
    };
  }
})();

这是指令 <div linear-chart chart-data="salesData"></div>

Answer 1

在没有更好的主意的情况下，我使用了这个.. Directive is being rendered before promise is resolved

指令看起来像这样..

    angular
.module('lightsensors')
.directive('lightChart', lightChart);

lightChart.$inject = ['$window'];

function lightChart($window) {

return{
  restrict:'EA',
  template:'<svg width="950" height="350"></svg>',
  link: function link(scope, elem, attrs){

    console.log(scope.vm.lightsensors[0].payload.value);

    var data = scope.vm.lightsensors;
    var padding= 20;
    var pathClass='path';
    var xScale, yScale, lineFun;

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


    function setChartParameters(){

      xScale = d3.scaleLinear()
      .domain([
        d3.min(data,function(d){
          return d.payload.timestamp;
        }), 
        d3.max(data, function(d){
          return d.payload.timestamp;
        })])
      .range ([padding + 5, rawSvg.attr('width') - padding]);

      yScale = d3.scaleLinear()
        .domain([0,d3.max(data, function(d){
          return d.payload.value;
        })])
        .range([rawSvg.attr('height') -padding, 0]);

      lineFun = d3.line()
        .x(function(d){
          return xScale(d.payload.timestamp);
        })
        .y(function(d){
          return yScale(d.payload.value);
        });
    }

    function drawLineChart() {

      setChartParameters();

      svg.append('svg:g')
          .attr('transform', 'translate(0,330)')
          .call(d3.axisBottom(xScale));

      svg.append('svg:g')
          .attr('transform', 'translate(20,0)')
          .call(d3.axisLeft(yScale));

      svg.append('svg:path')
          .data([data])
          .attr('class', pathClass)
          .attr('d', lineFun);
    }

    drawLineChart();

  }

};
}
})();

这是 HTML

  <div ng-if="vm.lightsensors.$resolved">
  <div light-chart></div>
  </div>