Question

我正在尝试使用MeanJS框架让d3和angular一起工作。我已经使用了很多但很新的意思是JS和棱角分明的。最佳实践似乎是将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代码放进去。我已经通过运行安装了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。

非常感谢任何帮助。

Answer 1

您可能需要将d3.js添加到config/env

中的文件中

示例：

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

Answer 2

由于找到了一些代码here，我找到了可能的答案。看起来像是在使用d3和从MeanJS中生成的yo生成的指令代码的问题，所以我调整了指令代码并使用了角度$ 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');

            }
        };
    }
);

用MeanJS连接D3

2 个答案: