如何将 d3.js 与角度.js应用程序一起使用

我编写了一个服务，它以json格式从mongodb返回数据。我正在尝试在树视图中显示数据。我正在使用这里给出的示例示例之一 http://bl.ocks.org/d3noob/8326869。当我检查网页时，我得到一个没有结构的空div，并且 Web 控制台中也没有任何错误。

$http.get('/getActors/' + $scope.productName).success(function(data){

        $scope.data = data;
        $scope.actors = [];

        var treeData = $scope.data;
        console.log(treeData)
        var margin = {top: 40, right: 120, bottom: 20, left: 120},
            width = 960 - margin.right - margin.left,
            height = 500 - margin.top - margin.bottom;
        var i = 0;
        var tree = d3.layout.tree()
            .size([height, width]);
        var diagonal = d3.svg.diagonal()
            .projection(function(d) { return [d.x, d.y]; });

        var svg = d3.select("#chart").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        root = treeData[0];
        update(root);
        function update(source) {
            // Compute the new tree layout.
            var nodes = tree.nodes(root).reverse(),
                links = tree.links(nodes);
            // Normalize for fixed-depth.
            nodes.forEach(function(d) { d.y = d.depth * 100; });
            // Declare the nodes…
            var node = svg.selectAll("g.node")
                .data(nodes, function(d) { return d.id || (d.id = ++i); });
            // Enter the nodes.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")"; });
            nodeEnter.append("circle")
                .attr("r", 10)
                .style("fill", "#fff");
            nodeEnter.append("text")
                .attr("y", function(d) {
                    return d.children || d._children ? -18 : 18; })
                .attr("dy", ".35em")
                .attr("text-anchor", "middle")
                .text(function(d) { return d.name; })
                .style("fill-opacity", 1);
            // Declare the links…
            var link = svg.selectAll("path.link")
                .data(links, function(d) { return d.target.id; });
            // Enter the links.
            link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", diagonal);
        }
        /*for (var actor in data){
            /!*$scope.actors.push(data[actor].actor);*!/
        }
        console.log("Printing actors new impl");
        items = data[actor].actor;
        for (var item in items){
            $scope.actors.push(items[item]);
        }*/
    }).error(function(data){
        console.log('Error: ' + data)
    });

数据是分层格式的有效 json

[
  {
    "_id": "56e2f2efe1379a2ea1fe2cd6",
    "productName": "Kernal",
    "feature": [],
    "activity": [],
    "actor": [
      "One",
      "Two",
      "Three"
    ]
  }
]

HTML 代码如下所示：

 <div id="chart">
   </div>