getting data to an AngularJS directive for D3.js on Mean.js app

Question

I'm trying to integrate D3.js into the a Mean.js crud module. The example here creating-charting-directives-using-angularjs-d3-js works fine if I delete the standard list-controller that mean.js creates and replace it with the sample hard coded data in the example controller.

I have no idea how to integrate real data from the database with the D3 directive. Should I be injecting the module service?
Btw I'm using the 0.4.2 version of Mean.js

This is the standard Meanjs list controller.

(function () {
  'use strict';

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

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

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

vm.charts = ChartsService.query();

}

})();

This is the D3 directive

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

This is the directive <div linear-chart chart-data="salesData"></div>

score 0 · Answer 1 · edited May 23 '17 at 12:08

In the absence of a better idea I've used this.. Directive is being rendered before promise is resolved

The directive looks like this..

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

  }

};
}
})();

This is the HTML

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

getting data to an AngularJS directive for D3.js on Mean.js app

1 Answers1