Question

所以我有一个使用ui-router的角度应用程序。假设我想在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必须在控制器中吗？如果是这样，我如何确保文件准备就绪？

Answer 1

您可以使用自定义指令。它可以访问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];

编辑：示例

Here's a quick example of a simple directive that binds data with d3

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

1 个答案:

编辑：示例