改成像是線上人數的圖表，不同顏色表示不同裝置
遇到的問題：客製化 transition 還是沒完全掌握，不知道如何把很多種 transition 組合在一起
Last active
November 13, 2015 02:15
-
-
Save ctiml/6b2354437f9f1c50285b to your computer and use it in GitHub Desktop.
15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| /*transition: fill 250ms linear;*/ | |
| transition-delay: 150ms; | |
| } | |
| path:hover { | |
| transition-delay: 0; | |
| } | |
| .total { | |
| text-anchor: middle; | |
| font-size: 96px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var data = [1, 1, 2, 3, 5]; | |
| var width = 960, | |
| height = 500; | |
| var outerRadius = height / 2 - 20, | |
| innerRadius = outerRadius / 1.5, | |
| cornerRadius = 10; | |
| var pie = d3.layout.pie() | |
| //.padAngle(.02) | |
| .sort(null); | |
| var arc = d3.svg.arc() | |
| .padRadius(outerRadius) | |
| .innerRadius(innerRadius); | |
| var color = d3.scale.category10(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| var total = svg.append("text") | |
| .attr("y", 40) | |
| .attr("class", "total"); | |
| update(data); | |
| setInterval(function() { | |
| data = next(data); | |
| console.log(data); | |
| update(data); | |
| }, 2000); | |
| function arcTween(outerRadius, delay) { | |
| return function() { | |
| d3.select(this).transition().delay(delay).attrTween("d", function(d) { | |
| var i = d3.interpolate(d.outerRadius, outerRadius); | |
| return function(t) { d.outerRadius = i(t); return arc(d); }; | |
| }); | |
| }; | |
| } | |
| function update() { | |
| var path = svg.selectAll("path") | |
| .data(pie(data)); | |
| path.enter().append("path") | |
| .style("fill", function(d, i) { return color(i); }) | |
| //.on("mouseover", arcTween(outerRadius, 0)) | |
| //.on("mouseout", arcTween(outerRadius - 20, 150)); | |
| path.each(function(d) { d.outerRadius = outerRadius - 20; }) | |
| .transition() | |
| .attr("d", arc) | |
| path.exit().remove(); | |
| total | |
| .transition().duration(50).styleTween("font-size", function() { | |
| return d3.interpolateRound(96, 100); | |
| }) | |
| .transition().duration(150).tween("text", textTween(d3.sum(data))) | |
| .transition().duration(100).styleTween("font-size", function() { | |
| return d3.interpolateRound(100, 96); | |
| }); | |
| } | |
| function textTween(current) { | |
| return function() { | |
| var prev = parseInt(d3.select(this).text()) || 0; | |
| var i = d3.interpolateRound(prev, current); | |
| return function(t) { | |
| this.textContent = i(t); | |
| console.log(t); | |
| }; | |
| } | |
| } | |
| function next(s) { | |
| var r = []; | |
| for (var i = 0; i < s.length; i++) { | |
| var c = s[i] + Math.floor(Math.random() * 3) - Math.floor(Math.random() * 1.25); | |
| if (c < 0) { c = 0; } | |
| r.push(c); | |
| } | |
| return r; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment