Angular D3不顯示
[英]Angular D3 not Displaying
問題描述
我正在嘗試創建一個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();
})
1 個解決方案
解決方案1
0 2015-12-23 14:59:18
我還沒有深入研究您的代碼，但是乍一看似乎您沒有將<d3-bars data="d3Data"></d3-bars>指令綁定到正確的變量。 看來您的控制器正在設置屬性$scope.data而不是$scope.d3Data
Angular D3 不顯示折線圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.