如何在Angular.js应用程序中使用d3.js？

Question

I have written a service which returns the data from mongodb in json format. I am trying to display data in tree view. I am using one of the sample example given here http://bl.ocks.org/d3noob/8326869 . When I check the webpage I get an empty div with no structure and there is not any error in web console as well.

$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)
    });

Data is a valid json in hierarchical format

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

    ]
  }
]

html code looks like:

 <div id="chart">

   </div>

Answer 1

please remove # from html code

<div id="chart">

   </div>