Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
softend:sp [2012/07/02 09:04] – admin | softend:sp [2019/05/02 17:25] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | < | ||
+ | < | ||
+ | <script type=" | ||
+ | <style type=" | ||
+ | path { | ||
+ | fill-rule: evenodd; | ||
+ | fill: #aaa; | ||
+ | fill-opacity: | ||
+ | stroke: #666; | ||
+ | stroke-width: | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | <script type=" | ||
+ | |||
+ | var w = 240, | ||
+ | h = 100, | ||
+ | x = d3.scale.ordinal().domain(d3.range(3)).rangePoints([0, | ||
+ | |||
+ | var fields = [ | ||
+ | {name: " | ||
+ | {name: " | ||
+ | {name: " | ||
+ | ]; | ||
+ | |||
+ | var arc = d3.svg.arc() | ||
+ | .innerRadius(10) | ||
+ | .outerRadius(20) | ||
+ | .startAngle(0) | ||
+ | .endAngle(function(d) { return (d.value / d.size) * 2 * Math.PI; }); | ||
+ | |||
+ | var svg = d3.select("# | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | setInterval(function() { | ||
+ | var now = new Date(); | ||
+ | |||
+ | fields[0].previous = fields[0].value; | ||
+ | fields[1].previous = fields[1].value; | ||
+ | fields[2].previous = fields[2].value; | ||
+ | |||
+ | var path = svg.selectAll(" | ||
+ | .data(fields.filter(function(d) { return d.value; }), function(d) { return d.name; }); | ||
+ | |||
+ | path.enter().append(" | ||
+ | .attr(" | ||
+ | .transition() | ||
+ | .ease(" | ||
+ | .duration(750) | ||
+ | .attrTween(" | ||
+ | |||
+ | path.transition() | ||
+ | .ease(" | ||
+ | .duration(750) | ||
+ | .attrTween(" | ||
+ | |||
+ | path.exit().transition() | ||
+ | .ease(" | ||
+ | .duration(750) | ||
+ | .attrTween(" | ||
+ | .remove(); | ||
+ | |||
+ | }, 1000); | ||
+ | |||
+ | function arcTween(b) { | ||
+ | var i = d3.interpolate({value: | ||
+ | return function(t) { | ||
+ | return arc(i(t)); | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ |