当我使用angular的指令D3plus -d3plus时，角度框图不出现

Question

这篇文章是I am trying to inject a partial template in Angular that contains a graph的后续文章:本质上，我有一个Angular应用程序，当我点击下拉菜单上的"employee“时，我正试图注入一个名为"employees.html”的部分模板。

多亏了前面的回答，我可以使用Angualr控制器( d3plus -d3plus.js：https://github.com/mariohmol/angular-d3plus)调用angular boxplot。我正在使用盒子演示：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>

这是我更新的Angular模块(我使用的是测试数据)：

/// <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" }
                        ];

                    });
                });

非常感谢您的宝贵时间！

编辑：

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

})；

最好的