D3plus boxplots не появляются, когда я использую Angular's directive angular-d3plus

Question

Этот пост является следствием: I am trying to inject a partial template in Angular that contains a graph По сути, у меня есть приложение с угловым выражением, и я пытаюсь ввести частичный шаблон под названием "employees.html" когда я нажимаю «сотрудник» в выпадающем меню.

. Благодаря предыдущим ответам я могу вызвать квадратный ящик d3plus с контроллером Angualr (угловой-d3plus.js: https://github.com/mariohmol/angular-d3plus). Я использую демонстрационную версию коробки: http://codepen.io/mariomol/pen/vGNQaV просто чтобы сделать ее первой работой.

Однако присущи рефлективный, вербальный крайне слабо (я едва могу видеть их на моем экране):

Как правило, они должны появиться ясно: http://d3plus.org/examples/basic/78018ce8c3787d4e30d9/ Это потому, что я мешая CSS или иначе?

Вот мой обновленный employees.html:

<div data-ng-app="myModule"> 
    <div data-ng-controller="employeesController"> 
     <d3plus-box data="base_data" id='name' y="value" x="year"></d3plus-box> 
    </div> 
</div> 

Вот мой обновленный Угловая модуль (я использую тестовые данные):

/// <reference path="angular.min.js" /> 

var app = angular.module("myModule", ['ngRoute','angular-d3plus']) 
       .config(function ($routeProvider) { 
        $routeProvider 
         .when('/cases', { // Root: initialize with cases 
          templateUrl: 'templates/cases.html', 
          controller: 'casesController' 
         }) 
         .when('/protocols', { // Root: initialize with cases 
          templateUrl: 'templates/protocols.html', 
          controller: 'protocolsController' 
         }) 
         .when('/employees', { 
          templateUrl: 'templates/employees.html', 
          controller: 'employeesController' 
         }) 
       }) 
       .controller('casesController', function ($scope) { 
        $scope.message = "Cases!"; 
       }) 
       .controller('protocolsController', function ($scope) { 
        $scope.message = "This is the protocols page!"; 
       }) 
       .controller('employeesController', function ($scope, $http) { 
        $http.get('dataWebService.asmx/getTotalForDateIntervalEmployees', { 
         params: { startDate: '2015-01-01', endDate: '2016-08-01' } 
        }) 
        .then(function (response) { 
         $scope.base_data = [ 
      { "year": 1991, "name": "alpha", "value": 15, "group": "black" }, 
      { "year": 1991, "name": "beta", "value": -10, "group": "black" }, 
      { "year": 1991, "name": "gamma", "value": 5, "group": "black" }, 
      { "year": 1991, "name": "delta", "value": -50, "group": "black" }, 
      { "year": 1992, "name": "alpha", "value": 20, "group": "black" }, 
      { "year": 1992, "name": "beta", "value": -10, "group": "black" }, 
      { "year": 1992, "name": "gamma", "value": 10, "group": "black" }, 
      { "year": 1992, "name": "delta", "value": -43, "group": "black" }, 
      { "year": 1993, "name": "alpha", "value": 30, "group": "black" }, 
      { "year": 1993, "name": "beta", "value": -40, "group": "black" }, 
      { "year": 1993, "name": "gamma", "value": 20, "group": "black" }, 
      { "year": 1993, "name": "delta", "value": -17, "group": "black" }, 
      { "year": 1994, "name": "alpha", "value": 60, "group": "black" }, 
      { "year": 1994, "name": "beta", "value": -60, "group": "black" }, 
      { "year": 1994, "name": "gamma", "value": 25, "group": "black" }, 
      { "year": 1994, "name": "delta", "value": -32, "group": "black" } 
         ]; 

        }); 
       }); 

Большое спасибо за ваше время!

EDIT:

I am trying yo make D3plus accept non-date value for boxplot and reduce space between rows in bootstrap

Answer 1

хорошо знать, что вы используете.

В вашем случае это не потому, что вы делаете get, а .then() также должны получать обратный вызов ошибки?

вот пример использования кода:

http://codepen.io/mariomol/pen/BLjmGV?editors=1111

<div data-ng-app="myModule"> 
<div data-ng-controller="employeesController"> 
    <h1>Hello</h1> 
    <d3plus-box data="base_data" id='name' y="value" x="year"></d3plus-box> 
    ----------- 
</div> 

var app = angular.module("myModule", ['ngRoute','angular-d3plus']) 
      .config(function ($routeProvider) { 

       $routeProvider 
        .when('/cases', { // Root: initialize with cases 
         templateUrl: 'templates/cases.html', 
         controller: 'casesController' 
        }) 
        .when('/protocols', { // Root: initialize with cases 
         templateUrl: 'templates/protocols.html', 
         controller: 'protocolsController' 
        }) 
        .when('/employees', { 
         templateUrl: 'templates/employees.html', 
         controller: 'employeesController' 
        }) 
      }) 
      .controller('casesController', function ($scope) { 
       $scope.message = "Cases!"; 
      }) 
      .controller('protocolsController', function ($scope) { 
       $scope.message = "This is the protocols page!"; 
      }) 
      .controller('employeesController', function ($scope, $http) { 


    $http.get('http://google.com') 
       .then(function (response) { 

        $scope.base_data = [ 
     { "year": 1991, "name": "alpha", "value": 15, "group": "black" }, 
     { "year": 1991, "name": "beta", "value": -10, "group": "black" }, 
     { "year": 1991, "name": "gamma", "value": 5, "group": "black" }, 
     { "year": 1991, "name": "delta", "value": -50, "group": "black" }, 
     { "year": 1992, "name": "alpha", "value": 20, "group": "black" }, 
     { "year": 1992, "name": "beta", "value": -10, "group": "black" }, 
     { "year": 1992, "name": "gamma", "value": 10, "group": "black" }, 
     { "year": 1992, "name": "delta", "value": -43, "group": "black" }, 
     { "year": 1993, "name": "alpha", "value": 30, "group": "black" }, 
     { "year": 1993, "name": "beta", "value": -40, "group": "black" }, 
     { "year": 1993, "name": "gamma", "value": 20, "group": "black" }, 
     { "year": 1993, "name": "delta", "value": -17, "group": "black" }, 
     { "year": 1994, "name": "alpha", "value": 60, "group": "black" }, 
     { "year": 1994, "name": "beta", "value": -60, "group": "black" }, 
     { "year": 1994, "name": "gamma", "value": 25, "group": "black" }, 
     { "year": 1994, "name": "delta", "value": -32, "group": "black" } 
        ]; 


    },function(error){ 

       $scope.base_data = [ 
     { "year": 1991, "name": "alpha", "value": 15, "group": "black" }, 
     { "year": 1991, "name": "beta", "value": -10, "group": "black" }, 
     { "year": 1991, "name": "gamma", "value": 5, "group": "black" }, 
     { "year": 1991, "name": "delta", "value": -50, "group": "black" }, 
     { "year": 1992, "name": "alpha", "value": 20, "group": "black" }, 
     { "year": 1992, "name": "beta", "value": -10, "group": "black" }, 
     { "year": 1992, "name": "gamma", "value": 10, "group": "black" }, 
     { "year": 1992, "name": "delta", "value": -43, "group": "black" }, 
     { "year": 1993, "name": "alpha", "value": 30, "group": "black" }, 
     { "year": 1993, "name": "beta", "value": -40, "group": "black" }, 
     { "year": 1993, "name": "gamma", "value": 20, "group": "black" }, 
     { "year": 1993, "name": "delta", "value": -17, "group": "black" }, 
     { "year": 1994, "name": "alpha", "value": 60, "group": "black" }, 
     { "year": 1994, "name": "beta", "value": -60, "group": "black" }, 
     { "year": 1994, "name": "gamma", "value": 25, "group": "black" }, 
     { "year": 1994, "name": "delta", "value": -32, "group": "black" } 
        ]; 
       console.log(error); 
       }); 

});

bests