angularjs结合d3js实现资源展示

转载请注明出处: 转载自Bin's Blog:  angularjs & d3 实现资源展示( http://www.wenbin.cf/post/27/ )

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,
                                 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- 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;
     100%
}

.dashboard .server-overview .chart_area {
     325px;
    height: auto
}

.dashboard .server-overview .concentricchart .bg-circle {
    background: #F9F9F9;
    fill: #F9F9F9;
    stroke: #FFF;
    stroke- 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
}

来看看效果：