我试图让angularjs和d3工作与一个简单的甜甜圈图。但我得到的是一个空的svg，我不知道为什么。SVG被创建为一个200x200px的元素，但是没有内容。也许json数据有问题。我希望任何人都能帮助我。谢谢你。
这是我的index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Stromverbrauch App</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#"><b>Hauptmenü</b></a>
</li>
<li>
<a id="active" href="#aktuell">Aktueller Stromverbrauch</a>
</li>
<li>
<a href="#tfh">Stromverbrauch letzte 24h</a>
</li>
<li>
<a href="#">Stromverbrauch letzte 7 Tage</a>
</li>
<li>
<a href="#">Stromverbrauch monatlich</a>
</li>
<li>
<a href="#">Nutzerforum</a>
</li>
<li>
<a href="#">Gerätevergleich</a>
</li>
<li>
<a href="#">Tipps & Tricks</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
<!-- HEADER -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ihr Stromverbrauch</a>
</div>
<span class="glyphicon glyphicon-user" id="user" aria-hidden="true"></span>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</nav>
<nav class="navbar navbar-default" id="subHeader">
<div class="container-fluid">
<div class="stars">
<span class="glyphicon glyphicon-star" id="oneStar" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" id="twoStar" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" id="threeStar" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" id="fourStar" aria-hidden="true"></span>
<span class="glyphicon glyphicon-star" id="fiveStar" aria-hidden="true"></span>
</div>
<p class="navbar-text" id="rating">Bewertung des aktuellen Stromverbrauchs:</p>
</div>
</nav>
<!-- PAGE CONTENT -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default active">Aktuell</button>
<button type="button" class="btn btn-default">Letzte Stunde</button>
<button type="button" class="btn btn-default">Letzte 24h</button>
<button type="button" class="btn btn-default">Letzte 7 Tage</button>
</div>
<div class="btn-group" id="group2" role="group" aria-label="...">
<button type="button" class="btn btn-default active">Geräte</button>
<button type="button" class="btn btn-default">Räume</button>
</div>
<p class="navbar-text" id="textFooter">Wählen Sie die Raum- oder Geräteübersicht und einen Zeitraum:</p>
</div>
</div>
</div>
</footer>
<script src="lib/d3/d3.min.js" charset="utf-8"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.js" type="text/javascript"></script>
<script src="lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
这是我的n -view内容:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-controller="MainCtrl">
<donut-chart data="donutData"></donut-chart>
</body>
<script src="js/app.js" type="text/javascript"></script>
</html>
这是我的app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/aktuell.html'
})
.when('/tfh', {
templateUrl: 'partials/letzte24h.html'
})
.otherwise({
redirectTo: '/'
});
}]);
myApp.controller('MainCtrl', function($scope, $http, $interval){
$interval(function(){
$http.get('donut-data-api.json').then(function(response){
// your API would presumably be sending new data, not the same
// data each time!
var data = response.data
.map(function(d){ return d * ( 1 - Math.random() / 10) });
$scope.donutData = data;
}, function(err){
throw err;
});
}, 1000);
});
myApp.directive('donutChart', function(){
function link(scope, el, attr){
var color = d3.scale.category10();
var width = 200;
var height = 200;
var min = Math.min(width, height);
var svg = d3.select(el[0]).append('svg');
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc()
.outerRadius(min / 2 * 0.9)
.innerRadius(min / 2 * 0.5);
svg.attr({width: width, height: height});
// center the donut chart
var g = svg.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
// add the <path>s for each arc slice
var arcs = g.selectAll('path');
scope.$watch('data', function(data){
if(!data){ return; }
arcs = arcs.data(pie(data));
arcs.exit().remove();
arcs.enter().append('path')
.style('stroke', 'white')
.attr('fill', function(d, i){ return color(i) });
// update all the arcs (not just the ones that might have been added)
arcs.attr('d', arc);
}, true);
}
return {
link: link,
restrict: 'E',
scope: { data: '=' }
};
});
这是我的存储库，如果有人想看到我所有的文件(希望它被允许在这里发布):https://github.com/DavidH1904/d3_webapp
我认为你添加的弧路径不正确。具体来说，需要在selectAll()之后调用data()。试试这个?
arcs = arcs.selectAll('path').data(pie(data));
arcs.exit().remove();
arcs.enter().append('path')
.style('stroke', 'white')
.attr('fill', function(d, i){ return color(i) });
// update all the arcs (not just the ones that might have been added)
arcs.attr('d', arc);