我有一个使用ui-router的angular应用。假设我想在div.wtf
中显示一个柱状图,如下所示:
index . html
<div ui-view ></div>
state1.html
<div class="wtf"></div>
js:
var dataset = [5,3,2,2,10];
d3.select('.wtf').selectAll('div')
.data(dataset)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function (d) {
return d * 5 + 'px';
});
js必须在控制器中吗?如果是这样,我如何确保文件准备好了?
您可以使用自定义指令。它提供了对DOM的访问,而不会破坏你的控制器。
app.directive('bindDeeThreeStuff', function($window){
var d3 = $window.d3;
return function(scope, elem, attrs) {
var d3Elem = d3.select(elem[0]);
scope.$watch(attrs.bindDeeThreeStuff, function(val) {
d3Elem.selectAll('.bar').data(val)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function(d) {
return d * 5
});
});
};
});
在你看来:
<div bind-dee-three-stuff="myData"></div>
在你的控制器中:
$scope.myData = [10,20,30,40,50];
编辑:例子
下面是一个简单指令的快速示例,它将data与d3绑定。