Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
softend:test4 [2013/12/25 00:55] – admin | softend:test4 [2019/05/02 17:25] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | |||
+ | body { | ||
+ | background: #fff; | ||
+ | font: 10px sans-serif; | ||
+ | margin: auto; | ||
+ | position: relative; | ||
+ | width: 960px; | ||
+ | } | ||
+ | |||
+ | text { | ||
+ | text-anchor: | ||
+ | } | ||
+ | |||
+ | #credit { | ||
+ | position: absolute; | ||
+ | right: 4px; | ||
+ | bottom: 4px; | ||
+ | color: #ddd; | ||
+ | } | ||
+ | |||
+ | #credit a { | ||
+ | color: #fff; | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | <div id=" | ||
+ | <script src=" | ||
+ | < | ||
+ | |||
+ | var width = 460, | ||
+ | height = 400, | ||
+ | radius = Math.min(width, | ||
+ | spacing = .09; | ||
+ | |||
+ | var formatSecond = d3.time.format(" | ||
+ | formatMinute = d3.time.format(" | ||
+ | formatHour = d3.time.format(" | ||
+ | formatDay = d3.time.format(" | ||
+ | formatDate = d3.time.format(" | ||
+ | formatMonth = d3.time.format(" | ||
+ | |||
+ | var color = d3.scale.linear() | ||
+ | .range([" | ||
+ | .interpolate(interpolateHsl); | ||
+ | |||
+ | var arc = d3.svg.arc() | ||
+ | .startAngle(0) | ||
+ | .endAngle(function(d) { return d.value * 2 * Math.PI; }) | ||
+ | .innerRadius(function(d) { return d.index * radius; }) | ||
+ | .outerRadius(function(d) { return (d.index + spacing) * radius; }); | ||
+ | |||
+ | var svg = d3.select(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | |||
+ | var field = svg.selectAll(" | ||
+ | .data(fields) | ||
+ | .enter().append(" | ||
+ | |||
+ | field.append(" | ||
+ | |||
+ | field.append(" | ||
+ | |||
+ | d3.transition().duration(0).each(tick); | ||
+ | |||
+ | d3.select(self.frameElement).style(" | ||
+ | |||
+ | function tick() { | ||
+ | field = field | ||
+ | .each(function(d) { this._value = d.value; }) | ||
+ | .data(fields) | ||
+ | .each(function(d) { d.previousValue = this._value; | ||
+ | |||
+ | field.select(" | ||
+ | .transition() | ||
+ | .ease(" | ||
+ | .attrTween(" | ||
+ | .style(" | ||
+ | |||
+ | field.select(" | ||
+ | .attr(" | ||
+ | .text(function(d) { return d.text; }) | ||
+ | .transition() | ||
+ | .ease(" | ||
+ | .attr(" | ||
+ | return " | ||
+ | + " | ||
+ | + " | ||
+ | }); | ||
+ | |||
+ | setTimeout(tick, | ||
+ | } | ||
+ | |||
+ | function arcTween(d) { | ||
+ | var i = d3.interpolateNumber(d.previousValue, | ||
+ | return function(t) { d.value = i(t); return arc(d); }; | ||
+ | } | ||
+ | |||
+ | function fields() { | ||
+ | var now = new Date, | ||
+ | second = Math.floor((now.getSeconds() + now.getMilliseconds() / 1000)) / 60, | ||
+ | minute = Math.floor((now.getMinutes() + second)) / 60, | ||
+ | hour = Math.floor((now.getHours() + minute)) / 24, | ||
+ | day = Math.floor((now.getDay() + hour)) / 7, | ||
+ | date = Math.floor((now.getDate() - 1 + hour)) / (32 - new Date(now.getYear(), | ||
+ | month = Math.floor((now.getMonth() + date)) / 12; | ||
+ | return [ | ||
+ | {value: second, index: .7, text: formatSecond(now)}, | ||
+ | {value: minute, index: .6, text: formatMinute(now)}, | ||
+ | {value: hour, index: .5, text: formatHour(now)}, | ||
+ | {value: day, index: .3, text: formatDay(now)}, | ||
+ | {value: date, index: .2, text: formatDate(now)}, | ||
+ | {value: month, index: .1, text: formatMonth(now)} | ||
+ | ]; | ||
+ | } | ||
+ | |||
+ | // Avoid shortest-path interpolation. | ||
+ | function interpolateHsl(a, | ||
+ | var i = d3.interpolateString(a, | ||
+ | return function(t) { | ||
+ | return d3.hsl(i(t)); | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ |