用MeanJS连接D3
用MeanJS连接D3
提问于 2014-12-21 12:07:35
我正在尝试使用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有关。
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2014-12-22 09:35:59
Stack Overflow用户
发布于 2014-12-22 10:10:53
我已经找到了这个问题的可能答案，这要归功于一些here代码。在MeanJS中使用d3和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');
}
};
}
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27586646
复制相关文章
相似问题
腾讯云开发者
