在Mean.js app

Question

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

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

这是标准的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>