Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung Nächste ÜberarbeitungBeide Seiten der Revision | ||
start [2019/05/02 17:21] – Externe Bearbeitung 127.0.0.1 | start [2019/07/09 15:30] – gelöscht admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | < | ||
- | <iframe src=" | ||
- | </ | ||
- | |||
- | {{: | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | |||
- | |||
- | |||
- | <meta charset=" | ||
- | < | ||
- | |||
- | header { | ||
- | font-family: | ||
- | width: 240px; | ||
- | height: 20px; | ||
- | position: relative; | ||
- | } | ||
- | |||
- | form { | ||
- | position: relative; | ||
- | top: 1em; | ||
- | left: 1em; | ||
- | | ||
- | } | ||
- | |||
- | path { | ||
- | fill-rule: evenodd; | ||
- | stroke: #333; | ||
- | stroke-width: | ||
- | } | ||
- | |||
- | .sun path { | ||
- | fill: #6baed6; | ||
- | } | ||
- | |||
- | .planet path { | ||
- | fill: #9ecae1; | ||
- | } | ||
- | |||
- | .annulus path { | ||
- | fill: #c6dbef; | ||
- | } | ||
- | |||
- | </ | ||
- | |||
- | <script src=" | ||
- | < | ||
- | |||
- | var width = 460, | ||
- | height = 300, | ||
- | radius = 50, | ||
- | x = Math.sin(2 * Math.PI / 3), | ||
- | y = Math.cos(2 * Math.PI / 3); | ||
- | |||
- | var offset = 0, | ||
- | speed = 4, | ||
- | start = Date.now(); | ||
- | |||
- | var svg = d3.select(" | ||
- | .attr(" | ||
- | .attr(" | ||
- | .append(" | ||
- | .attr(" | ||
- | .append(" | ||
- | |||
- | var frame = svg.append(" | ||
- | .datum({radius: | ||
- | |||
- | frame.append(" | ||
- | .attr(" | ||
- | .datum({teeth: | ||
- | .append(" | ||
- | .attr(" | ||
- | |||
- | frame.append(" | ||
- | .attr(" | ||
- | .datum({teeth: | ||
- | .append(" | ||
- | .attr(" | ||
- | |||
- | frame.append(" | ||
- | .attr(" | ||
- | .attr(" | ||
- | .datum({teeth: | ||
- | .append(" | ||
- | .attr(" | ||
- | |||
- | frame.append(" | ||
- | .attr(" | ||
- | .attr(" | ||
- | .datum({teeth: | ||
- | .append(" | ||
- | .attr(" | ||
- | |||
- | frame.append(" | ||
- | .attr(" | ||
- | .attr(" | ||
- | .datum({teeth: | ||
- | .append(" | ||
- | .attr(" | ||
- | |||
- | d3.selectAll(" | ||
- | .data([radius * 5, Infinity, -radius]) | ||
- | .on(" | ||
- | var radius0 = frame.datum().radius, | ||
- | frame.datum({radius: | ||
- | svg.attr(" | ||
- | }); | ||
- | |||
- | d3.selectAll(" | ||
- | .on(" | ||
- | |||
- | function gear(d) { | ||
- | var n = d.teeth, | ||
- | r2 = Math.abs(d.radius), | ||
- | r0 = r2 - 8, | ||
- | r1 = r2 + 8, | ||
- | r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20, | ||
- | da = Math.PI / n, | ||
- | a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0), | ||
- | i = -1, | ||
- | path = [" | ||
- | while (++i < n) path.push( | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | " | ||
- | path.push(" | ||
- | return path.join("" | ||
- | } | ||
- | |||
- | d3.timer(function() { | ||
- | var angle = (Date.now() - start) * speed, | ||
- | transform = function(d) { return " | ||
- | frame.selectAll(" | ||
- | frame.attr(" | ||
- | }); | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ~~TAGCLOUD~~ |