0

我正在尝试使用MeanJS框架让 d3 和 angular 一起工作。我已经使用了很多 D3，但对于 meanJS 和 angular 来说非常新。最佳实践似乎是将 d3 代码放在指令中。我已经创建了一个名为 customers 的 CRUD 模块，所以我使用了以下命令：

yo meanjs:angular-directive mus-example

这已经生成了指令文件，将其全部连接起来并给了我以下代码（我添加的评论除外）：

'use strict';



angular.module('customers').directive('musExample', [
function() {
return {
template: '<div></div>',
restrict: 'E',
link: function postLink(scope, element, attrs) {

                //I want to add my d3 code here

                element.text('this the musExample directive');
            }
        };
    }
]);

我已经使用它进行了测试，一切都很好。该指令打印出 element.text 所以没问题

所以现在我想把我的 D3 代码放进去。我已经通过运行 bower install d3 安装了 d3

这似乎已经更新了 env/all.js 文件，我可以在浏览器中看到 d3 加载。但是，一旦我尝试在指令中使用 D3 代码，就会出现如下错误。

  public/modules/customers/directives/mus-example.client.directive.js
 13 |                 var color = d3.scale.category10();
                                  ^ 'd3' is not defined.

我真正想要的是一些关于如何通过指令将 d3 挂钩到 meanJS 的 hello-world 示例。我认为有某种配置文件或者我没有用 d3 更新的东西，我很确定这真的很简单，我仍然对 meanjs 不满意。连接 d3 和 Angular 真的很容易，这里发生的事情与我没有正确理解 meanjs 有关。

任何帮助将不胜感激。

4

2 回答 2

0

您可能需要添加d3.js到文件中config/env

例子：

https://github.com/meanjs/mean/blob/master/config/env/production.js

于 2014-12-22T01:35:58.617 回答
0

多亏了这里的一些代码，我找到了一个可能的答案。使用 d3 和在 MeanJS 中从 yo 生成的指令代码看起来像是一个问题，所以我调整了指令代码并使用 angular $window 对象来获取 d3。我可以看到这是如何工作的，但我有兴趣看看人们是否认为这是最佳实践或有更好的方法 - 这确实有效，但似乎不太正确。 

'use strict';

angular.module('customers').directive('musExample',   
    function($window) {
        return {
            template: '<div></div>',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {

                var d3 = $window.d3;
            // example of d3 at work

                var canvas = d3.select('mus-example')
                    .append('svg')
                    .attr('width', 100)
                    .attr('height', 200);


               var circle = canvas.append('circle')
                    .attr('cx', 30)
                    .attr('cy', 30)
                    .attr('r', 24)
                    .attr('fill', 'blue');

            }
        };
    }
);
于 2014-12-22T02:10:52.723 回答