angularjs结合d3js实现资源展示
之前有用过d3js实现拓扑结构，这次需要调取一些kubernetes后台数据，发现angularjs已经能够注入d3来做这件事了，很开心啊
首先注入d3js
(function () {
'use strict';
angular.module('Myapp', []).directive("d3MinionBarGauge", ["d3DashboardService", function(e) {
return {
restrict: "E",
scope: {
data: "=",
thickness: "@",
graphWidth: "@",
graphHeight: "@"
},
link: function(t, a, n) {
var r = function(e) {
function n(e, a) {
return null === a || void 0 === a ? t.render(e) : s(a, e)
}
function r(e) {
var t = e.data
, a = c(t);
o(a, e.width, e.height)
}
function o(t, n, r) {
v = e.select(a[0]).append("svg").attr("width", "100%"),
b = e.select(a[0]).append("svg").attr("width", "100%");
var o = v.attr("class", "chart").attr("width", n).attr("height", r - 25).append("svg:g").attr("class", "concentricchart").attr("transform", "translate(" + n / 2 + "," + r / 4 + ")");
b.attr("class", "legend").attr("width", n);
y = Math.min(n, r) / 2;
var s = (b.append("text").attr("class", "hostName").attr("transform", "translate(" + (n - 120) / 2 + ",15)"),
b.append("svg:g").attr("class", "label_legend_area").attr("transform", "translate(" + (n - 215) / 2 + ",35)"));
s.append("svg:g").attr("class", "legend_group"),
s.append("svg:g").attr("class", "label_group").attr("transform", "translate(25,11)"),
s.append("svg:g").attr("class", "stats_group").attr("transform", "translate(115,11)"),
o.append("svg:g").attr("class", "path_group").attr("transform", "translate(0," + r / 4 + ")"),
o.append("svg:g").attr("class", "value_group").attr("transform", "translate(" + -(.205 * n) + "," + -(.1 * r) + ")");
l(o, t)
}
function s(e, t) {
if (void 0 !== t && null !== t) {
var a = jQuery.extend(!0, {}, t)
, n = jQuery.extend(!0, {}, e)
, r = c(a);
k = c(n),
i(r)
}
}
function i(e) {
l(null , e)
}
function c(e) {
var t = (2 * Math.PI * y,
[]);
return $.each(e[0].segments, function(t, a) {
function n(e) {
var t = 200;
e > t && (e = t);
var a = e
, n = a / t
, r = 4 * n * Math.PI
, o = r
, s = 2 * Math.PI
, i = s + o;
return {
startAngle: s,
endAngle: i
}
}
var r = n(a.value);
e[0].segments[t].startAngle = r.startAngle,
e[0].segments[t].endAngle = r.endAngle;
var o = a.maxData
, s = n(o.maxValue + .2);
e[0].segments[t].maxTickStartAngle = s.startAngle,
e[0].segments[t].maxTickEndAngle = s.endAngle;
var i = n(o.maxValue);
e[0].segments[t].maxArcStartAngle = i.startAngle,
e[0].segments[t].maxArcEndAngle = i.endAngle,
e[0].segments[t].index = t
}),
t.push(e[0].segments),
t[0]
}
function l(e, a) {
var n = v
, r = 750;
$.each(a, function(e, t) {
void 0 !== k[e] ? a[e].previousEndAngle = k[e].endAngle : a[e].previousEndAngle = 0
});
var o = parseInt(t.thickness, 10)
, s = parseInt(t.graphWidth, 10) / 3
, i = v.select(".path_group")
, c = i.selectAll(".arc_group").data(a)
, l = c.enter().append("g").attr("class", "arc_group");
l.append("path").attr("class", "bg-circle").attr("d", h(o, s)),
l.append("path").attr("class", function(e, t) {
return "max_tick_arc " + e.maxData.maxTickClassNames
}),
l.append("path").attr("class", function(e, t) {
return "max_bg_arc " + e.maxData.maxClassNames
}),
l.append("path").attr("class", function(e, t) {
return "value_arc " + e.classNames
});
var f = c.select(".max_tick_arc");
f.transition().attr("class", function(e, t) {
return "max_tick_arc " + e.maxData.maxTickClassNames
}).attr("d", function(e) {
var t = d(o, s);
return t.startAngle(e.maxTickStartAngle),
t.endAngle(e.maxTickEndAngle),
t(e)
});
var g = c.select(".max_bg_arc");
g.transition().attr("class", function(e, t) {
return "max_bg_arc " + e.maxData.maxClassNames
}).attr("d", function(e) {
var t = d(o, s);
return t.startAngle(e.maxArcStartAngle),
t.endAngle(e.maxArcEndAngle),
t(e)
});
var b = c.select(".value_arc");
b.transition().ease("exp").attr("class", function(e, t) {
return "value_arc " + e.classNames
}).duration(r).attrTween("d", function(e) {
return u(e, o, s)
}),
c.exit().select(".value_arc").transition().ease("exp").duration(r).attrTween("d", function(e) {
return u(e, o, s)
}).remove(),
p(n, a, s, o),
m(n, a)
}
function u(t, a, n) {
var r = JSON.parse(JSON.stringify(t));
r.endAngle = t.previousEndAngle;
var o = e.interpolate(r, t);
return function(e) {
return g(a, n)(o(e))
}
}
function d(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
});
return n
}
function p(e, t, a, n) {
v.select(".value_group").selectAll("*").remove();
var r = (t.length,
e.select(".value_group"))
, o = r.selectAll("text.value").data(t);
o.enter().append("svg:text").attr("class", "value").attr("dx", function(e, t) {
return 68
}).attr("dy", function(e, t) {
return (n + 3) * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.value
}),
o.transition().duration(300).attrTween("d", function(e) {
return u(e, n, a)
}),
o.exit().remove()
}
function m(e, t) {
var a = b;
a.select(".label_group").selectAll("*").remove(),
a.select(".legend_group").selectAll("*").remove(),
a.select(".stats_group").selectAll("*").remove();
var n = a.select(".hostName")
, r = a.select(".label_group")
, o = a.select(".stats_group");
n.text(t[0].hostName),
n = a.selectAll("text.hostName").data(t),
n.attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.hostName
}),
n.exit().remove();
var s = r.selectAll("text.labels").data(t);
s.enter().append("svg:text").attr("class", "labels").attr("dy", function(e, t) {
return 19 * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.label
}),
s.exit().remove();
var i = o.selectAll("text.stats").data(t);
i.enter().append("svg:text").attr("class", "stats").attr("dy", function(e, t) {
return 19 * t
}).attr("text-anchor", function(e) {
return "start"
}).text(function(e) {
return e.stats
}),
i.exit().remove();
var c = a.select(".legend_group")
, l = c.selectAll("rect").data(t);
l.enter().append("svg:rect").attr("x", 2).attr("y", function(e, t) {
return 19 * t
}).attr("width", 13).attr("height", 13).attr("class", function(e, t) {
return "rect " + e.classNames
}),
l.exit().remove()
}
function f(e, t) {
return e - 20 * t
}
function g(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
}).startAngle(function(e, t) {
return e.startAngle
}).endAngle(function(e, t) {
return e.endAngle
});
return n
}
function h(t, a) {
var n = e.svg.arc().innerRadius(function(e) {
return f(a, e.index)
}).outerRadius(function(e) {
return f(a + t, e.index)
}).startAngle(0).endAngle(function() {
return 2 * Math.PI
});
return n
}
var v = e.select("svg.chart")
, b = e.select("svg.legend");
window.onresize = function() {
return t.$apply()
}
,
t.$watch(function() {
return angular.element(window)[0].innerWidth
}, function() {
return t.render(t.data)
}),
t.$watch("data", function(e, t) {
return n(e, t)
}, !0);
var y = 100
, k = [];
t.render = function(n) {
if (void 0 !== n && null !== n) {
e.select(a[0]).select("svg.chart").remove(),
e.select(a[0]).select("svg.legend").remove();
var o = ($(a[0]),
t.graphWidth)
, s = t.graphHeight
, i = {
data: n,
width: o,
height: s
};
r(i)
}
}
}
;
e.d3().then(r)
}
}
}
]);
angular.module("Dashboard").factory("d3DashboardService", ["$document", "$q", "$rootScope", function(e, t, a) {
function n() {
a.$apply(function() {
r.resolve(window.d3)
})
}
var r = t.defer()
, o = e[0].createElement("script");
o.type = "text/javascript",
o.async = !0,
o.src = "http://d3js.org/d3.v3.min.js",
//o.src = "/bower_components/d3/d3.min.js",
//o.src = "https://d3js.org/d3.v4.min.js",
o.onreadystatechange = function() {
"complete" == this.readyState && n()
}
,
o.onload = n;
var s = e[0].getElementsByTagName("body")[0];
return s.appendChild(o),
{
d3: function() {
return r.promise
}
}
}]);
})();
然后建几个数据，在controller中
(function() {
'use strict';
angular.module('Dashboard').controller('adminQuotaListCtrl', adminQuotaListCtrl);
/** @ngInject */
function adminQuotaListCtrl($scope, $http, $timeout) {
$scope.minions = ['test1'];
$scope.activeMinionDataById = {};
$scope.activeMinionDataById['test1'] =
[
{ segments:
[
{
label: "CPU",
stats: "4% / 2 CPU",
value: "4",
classNames: "color-1",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-1"
},
hostName: "test1"
},
{
label: "Memory",
stats: "2.25 GB / 3.98 GB",
value: "56",
classNames: "color-2",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-2"
},
hostName: "test1"
},
{
label: "Filesystem #1",
stats: "160.16 GB / 214.74 GB",
value: "74",
classNames: "color-3",
maxData: {
maxValue: "0",
maxTickClassNames: "bg-circle",
maxClassNames: "color-max-3"
},
hostName: "test1"
}
]
}
];
}
})();
然后写html
<div class="dashboard">
<div class=" server-overview">
<div class="row">
<div flex-sm="100" flex-md="50" flex-lg="33" flex-gt-lg="25" class="chart_area ng-scope col-md-12" ng-repeat="minion in minions">
<d3-minion-bar-gauge data="activeMinionDataById[minion]" class="concentric ng-isolate-scope" graph-width="325" graph-height="325" thickness="18">
</d3-minion-bar-gauge>
</div>
<div>
</div>
</div>
css也不能少
.dashboard .server-overview .color-1 {
background-color: #512DA8;
border-color: #512DA8;
fill: #512DA8;
stroke: #512DA8
}
.dashboard .server-overview .color-2 {
background-color: #9C27B0;
border-color: #9C27B0;
fill: #9C27B0;
stroke: #9C27B0
}
.dashboard .server-overview .color-3 {
background-color: #00BCD4;
border-color: #00BCD4;
fill: #00BCD4;
stroke: #00BCD4
}
.dashboard .server-overview .color-max-1 {
background-color: #b6a2e6;
border-color: #b6a2e6;
fill: #b6a2e6
}
.dashboard .server-overview .color-max-2 {
background-color: #dfa0ea;
border-color: #dfa0ea;
fill: #dfa0ea
}
.dashboard .server-overview .color-max-3 {
background-color: #87f1ff;
border-color: #87f1ff;
fill: #87f1ff
}
.dashboard .server-overview .max_tick_arc {
stroke: #FFF!important
}
.dashboard .server-overview .concentricchart .bg-circle {
background: #F9F9F9;
fill: #F9F9F9;
stroke: #FFF;
stroke-width: 1px
}
.dashboard .server-overview .concentricchart text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview .concentricchart .value_group {
fill: #fff
}
.dashboard .server-overview .concentricchart .legend_group rect {
opacity: .8
}
.dashboard .server-overview svg.legend {
height: auto
}
.dashboard .server-overview svg.legend text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview svg.legend .hostName {
font-size: 16px
}
.dashboard .server-overview .minion-name {
text-align: center;
vertical-align: bottom;
width: 100%
}
.dashboard .server-overview .chart_area {
width: 325px;
height: auto
}
.dashboard .server-overview .concentricchart .bg-circle {
background: #F9F9F9;
fill: #F9F9F9;
stroke: #FFF;
stroke-width: 1px
}
.dashboard .server-overview .concentricchart text {
font-size: 12px;
font-family: Roboto,sans-serif
}
.dashboard .server-overview .concentricchart .value_group {
fill: #fff
}
.dashboard .server-overview .concentricchart .legend_group rect {
opacity: .8
}
来看看效果：
