Angular D3不显示

Question

I am trying to create an Angular D3 force directed graph but for some reason it is not displaying, and there are no errors in the console. 我正在尝试创建一个Angular D3力导向图，但是由于某种原因它没有显示，并且控制台中没有错误。 Now it currently loads a JSON however I am also trying to figure out how to load in a variable instead.... any help will be appreciated 现在它当前正在加载JSON，但是我也正在尝试找出如何在变量中加载...。任何帮助将不胜感激

index.html 的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.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();
})

Answer 1

I have not dug to far into your code, but at first glance it looks like you are not binding the <d3-bars data="d3Data"></d3-bars> directive to the right variable. 我还没有深入研究您的代码，但是乍一看似乎您没有将<d3-bars data="d3Data"></d3-bars>指令绑定到正确的变量。 It looks like your controller is setting the property $scope.data not $scope.d3Data 看来您的控制器正在设置属性$scope.data而不是$scope.d3Data

Angular D3不显示

问题描述

1 个解决方案

解决方案1
0 2015-12-23 14:59:18

Angular D3不显示

问题描述

1 个解决方案

解决方案1 0 2015-12-23 14:59:18

解决方案1
0 2015-12-23 14:59:18