如何在ui-view状态中使用D3

How to use D3 inside a ui-view state

本文关键字：D3 状态 ui-view      更新时间：2023-09-26

我有一个使用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绑定。

相关文章：