1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | !function(SVGElement, document, bindings) {
|
7 | var ns = "http://www.w3.org/2000/svg"
|
8 | , xlinkNs = "http://www.w3.org/1999/xlink"
|
9 | , svg = document.createElementNS && document.createElementNS(ns, "svg").createSVGRect
|
10 | , proto = SVGElement && SVGElement.prototype
|
11 |
|
12 | if (!svg || !proto) {
|
13 | return
|
14 | }
|
15 |
|
16 | "svg circle clipPath defs g path rect text stop use line linearGradient".replace(/\w+/g, populateSvgElements)
|
17 |
|
18 | function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
|
19 | var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0
|
20 | return {
|
21 | x: centerX + (radius * Math.cos(angleInRadians)),
|
22 | y: centerY + (radius * Math.sin(angleInRadians))
|
23 | }
|
24 | }
|
25 | function describeArc(x, y, radius, startAngle, endAngle) {
|
26 | var start = polarToCartesian(x, y, radius, endAngle)
|
27 | , end = polarToCartesian(x, y, radius, startAngle)
|
28 | , arcSweep = endAngle - startAngle <= 180 ? "0" : "1"
|
29 | , d = [
|
30 | "M", start.x, start.y,
|
31 | "A", radius, radius, 0, arcSweep, 0, end.x, end.y
|
32 | ].join(" ")
|
33 | return d
|
34 | }
|
35 | bindings.arc = function(el, startAngle, endAngle, radius, x, y) {
|
36 | var center = (y && x && radius) || el.viewportElement.viewBox.baseVal.width >> 1
|
37 |
|
38 | el.setAttribute("d", describeArc(
|
39 | x || center,
|
40 | y || center,
|
41 | radius || center,
|
42 | 3.6 * startAngle,
|
43 | 3.6 * endAngle
|
44 | ))
|
45 | }
|
46 | bindings.xlink = function(el, href) {
|
47 |
|
48 | el.setAttributeNS(xlinkNs, "xlink:href", href)
|
49 | }
|
50 | bindings.xlink.once=1
|
51 |
|
52 | function drawLine(node) {
|
53 | var length = node.getTotalLength()
|
54 | node.style.transition = node.style.WebkitTransition = "none"
|
55 | node.style.strokeDasharray = length + " " + length
|
56 | node.style.strokeDashoffset = length
|
57 |
|
58 |
|
59 | node.getBoundingClientRect()
|
60 | node.style.transition = node.style.WebkitTransition = "stroke-dashoffset 5s ease .5s"
|
61 | node.style.strokeDashoffset = "0"
|
62 | }
|
63 | var arch1 = "a? ? 0 1 0 ? -?".split("?")
|
64 | , arch2 = "a? ? 0 1 0 ? ?".split("?")
|
65 | bindings.svgLine = function(el, points, opts) {
|
66 | opts = opts || {}
|
67 | var i = 0
|
68 | , dataPoints = []
|
69 | , radius = opts.radius || 0
|
70 | , d = ["M" + (100 - radius), points[0]]
|
71 | if (radius) {
|
72 | d.push(arch1.join(radius), arch2.join(radius))
|
73 | }
|
74 |
|
75 | for (; ++i < points.length; ) {
|
76 | if (opts.smooth) {
|
77 | d.push("C" + (i * 100 + 50 - radius), points[i-1] + "," + (i * 100 + 50 + radius), points[i] + "," + (i * 100 + 100 - radius), points[i])
|
78 | } else {
|
79 | d.push("L" + (i * 100 + 100 - radius), points[i])
|
80 | }
|
81 | if (radius) {
|
82 | d.push(arch1.join(radius), arch2.join(radius))
|
83 | }
|
84 |
|
85 | }
|
86 | el.setAttribute("d", d.join(" "))
|
87 | drawLine(el)
|
88 | el.parentNode.append(dataPoints)
|
89 | }
|
90 | var svgToLastActive
|
91 | bindings.initChart = function(el) {
|
92 | El.on(el, "mouseout", function(e) {
|
93 | if (svgToLastActive && e.target == el) {
|
94 | El.rmClass(svgToLastActive, "is-active")
|
95 | svgToLastActive = null
|
96 | }
|
97 | })
|
98 | }
|
99 |
|
100 | bindings.svgToLast = function(el) {
|
101 | El.on(el, "mouseover", function() {
|
102 | if (!svgToLastActive || el != el.parentNode.lastChild) {
|
103 | if (svgToLastActive) El.rmClass(svgToLastActive, "line-active")
|
104 | El.append(el.parentNode, el)
|
105 | El.addClass(el, "is-active")
|
106 | svgToLastActive = el
|
107 | }
|
108 | })
|
109 | }
|
110 | bindings.svgToLast.once =
|
111 | bindings.initChart.once = 1
|
112 | function populateSvgElements(name) {
|
113 | El.cache[name] = document.createElementNS(ns, name)
|
114 | }
|
115 | }(this.SVGElement, document, El.bindings)
|
116 |
|