我真的不知道发生了什么，我只是按照这个存储库的教程进行了自己的调整。 https://github.com/EpiphanyMachine/d3AngularIntegration
代码:
<!DOCTYPE html>
<html>
<head>
<title>heirarchical graph</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="DropdownCtrl">
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-default dropdown-toggle btn-custom" dropdown-toggle ng-disabled="disabled">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My <br>Mood</a></li>
<li><a href="#">Their <br>Mood</a></li>
<li><a href="#">Our <br>Moods</a></li>
<li><a href="#">Weekly <br>Breakdown</a></li>
</ul>
<d3-Circle></d3-Circle>
</div>
</div>
<div class="top3">
<ul id="navlist">
<li><img class="img-responsive project-image" src="./images/happywink.png" alt="project name" /></li>
<li><img class="img-responsive project-image" src="./images/laughhard.png" alt="project name" /></li>
<li><img class="img-responsive project-image" src="./images/smirk.png" alt="project name" /></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"> </script>
<script src="./js/app.js"></script>
<script src="./js/d3.js"></script>
<script src="./js/d3circle.js"></script>
<script src="./js/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
</body>
</html>
如您所见，d3 元素位于 Angular Controller 内，列表位于外部。由于某种原因它的渲染像这样，我不知道发生了什么。
javascript以防有人想看
(function () {
'use strict';
angular.module('myApp.directives')
.directive('d3Circle', ['d3', function(d3) {
return {
restrict: 'EA',
link: function(scope, iElement, iAttrs) {
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.texts = +d.texts;
});
var width = (window.innerWidth < 1280) ? 400 : 600,
height = (window.innerWidth < 1280) ? 400 : 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - 70);
var pie = d3.layout.pie()
.sort(null)
.startAngle(1.1*Math.PI)
.endAngle(3.1*Math.PI)
.value(function(d) { return d.texts; });
var svg = d3.select("body")
.append("svg")
.attr("width", '50%')
.attr("height", '50%')
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr("preserveAspectRatio", "xMinYMin")
.append("g")
.attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");
var text1;
var text2;
var g = svg.selectAll('g')
.data(pie(data))
.enter()
.append("g")
.attr("d", "arc")
.attr('fill', function(d, i) {
return color(d.data.mood);
});
g.append("path")
.style("fill", function(d) { return color(d.data.mood); })
.transition().delay(function(d, i) { return i * 500; }).duration(500)
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
g.on("mouseover", function(d) {
var total = d3.sum(data.map(function(d) { // NEW
return d.texts; // NEW
}));
var percent = Math.round(1000 * d.data.texts / total) / 10;
text1 = g.append("text")
.attr("translate", arc.centroid(d))
.attr("dy", ".5em")
.style("text-anchor", "middle")
.style("fill", "black")
.attr("class", "on")
.text(d.data.mood);
text2 = g.append("text")
.attr("translate", arc.centroid(d))
.attr("dy", "25")
.style("text-anchor", "middle")
.style("fill", "black")
.attr("class", "on")
.text(percent + '%');
})
.on("mouseout", function(d) {
text1.remove();
text2.remove();
});
/*g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.mood; });*/
});
}
};
}]);
}());
最佳答案
将 svg 附加到正文，它将位于列表下方:
解决方案#1:
您可以使用 div 而不是 body 来避免这种情况。
html:
<div id="svgPie"></div>
//svgPie above img list
<div class="top3">
<ul id="navlist">
<li><img class="img-responsive project-image" src="./images/happywink.png" alt="project name" /></li>
<li><img class="img-responsive project-image" src="./images/laughhard.png" alt="project name" /></li>
<li><img class="img-responsive project-image" src="./images/smirk.png" alt=
JS:
var svg = d3.select("#svgPie")
.append("svg")
解决方案#2:
只需替换:
var svg = d3.select("body")
.append("svg")
与:
var svg = d3.select("body").insert('svg', ':first-child')
希望对你有帮助!
关于javascript - 列表不会出现在 d3.js 图下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28230079/