angularjs结合d3js实现资源展示
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) {