角度 D3 不显示答案

【问题标题】：Angular D3 not Displaying角度 D3 不显示
【发布时间】：2015-12-22 19:08:12
【问题描述】：

我正在尝试创建一个 Angular D3 力有向图，但由于某种原因它没有显示，并且控制台中没有错误。现在它当前加载一个 JSON 但是我也在试图弄清楚如何加载一个变量......任何帮助将不胜感激

index.html

<head>
    <!--<script src="css/angular.css"></script>-->
</head>
<style>

    .node {
        stroke: #fff;
        stroke-width: 1.5px;
    }

    .link {
        stroke: #999;
        stroke-opacity: .6;
    }

</style>

<body>
<div ng-controller="MainCtrl">
    <d3-bars data="d3Data"></d3-bars>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
<script src="js/index.js"></script>
</body>

app.js

  app = angular.module("triForce", [])

app.controller("MainCtrl", function($scope, $http) {
    $scope.width = 900;
    $scope.height = 900;

    var color = d3.scale.category20()

    var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([$scope.width, $scope.height]);
    $scope.data=[{
        "nodes": [
            {
                "name": "hblodget",
                "group": 1,
                "size": 1,
                "image": null
            },
            {
                "name": "DowntownDonna69",
                "group": 1,
                "size": 20,
                "image": "http://pbs.twimg.com/profile_images/636139174672732160/L5cd008s_normal.jpg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            },
            {
                "name": "PupsherLive",
                "group": 1,
                "size": 19,
                "image": "http://pbs.twimg.com/profile_images/378800000210840839/93a8ba3852a8e20364957eb8b907b6b3_normal.jpeg"
            }
        ],
        "links": [
            {
                "source": 1,
                "target": 0,
                "value": 1
            },
            {
                "source": 2,
                "target": 0,
                "value": 1
            },
            {
                "source": 2,
                "target": 0,
                "value": 1
            },
            {
                "source": 2,
                "target": 0,
                "value": 1
            },
            {
                "source": 2,
                "target": 0,
                "value": 1
            },
            {
                "source": 2,
                "target": 0,
                "value": 1
            },
            {
                "source": 1,
                "target": 0,
                "value": 1
            }
        ]
    }
    ];

        $scope.nodes = graph.nodes;
        $scope.links = graph.links;

        for(var i=0; i < $scope.links.length ; i++){
            $scope.links[i].strokeWidth = Math.round(Math.sqrt($scope.links[i].value))
        }

        for(var i=0; i < $scope.nodes.length ; i++){
            $scope.nodes[i].color = color($scope.nodes[i].group)
        }

        force
            .nodes($scope.nodes)
            .links($scope.links)
            .on("tick", function(){$scope.$apply()})
            .start();
})

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

我没有深入研究您的代码，但乍一看，您似乎没有将<d3-bars data="d3Data"></d3-bars> 指令绑定到正确的变量。看起来您的控制器正在设置属性 $scope.data 而不是 $scope.d3Data

【讨论】：