蠕动小虫，练习

来源：互联网发布：linux挂载硬盘大小编辑：程序博客网时间：2024/04/28 16:46
蠕动的小虫子
<!DOCTYPE html><html>  <head><meta charset="utf-8"><title>testD3-10-scale.html</title><script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style></head><body><script type="text/javascript">//Width and heightvar w = 500;var h = 100;var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]  ];//Create scale functionsvar xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([0, w]);var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })])//            for(var i=0;i<=50;i++)            {                dataset.push([1,2]);            }//Create SVG elementvar svg = d3.select("body").append("svg").attr("width", w).attr("height", h);            svg.append("rect")               .attr("x","0")               .attr("y","0")               .attr("width","400")               .attr("height","400")               .attr("fill","blue");svg.selectAll("circle")   .data(dataset)   .enter()   .append("circle")   .attr("cx", function(d,i) {   return xScale(2*i);   })   .attr("cy", function(d,i) {   return yScale(i);   })   .attr("r", function(d) {   return Math.sqrt(h - d[1]);   })                           .attr("stroke-width",function(d){return 120;});svg.selectAll("text")   .data(dataset)   .enter()   .append("text")   .text(function(d) {   return d[0] + "," + d[1];   })   .attr("x", function(d) {   return xScale(d[0]);   })   .attr("y", function(d) {   return yScale(d[1]);   })   .attr("font-family", "sans-serif")   .attr("font-size", "11px")   .attr("fill", "red");            svg.selectAll("circle")               .attr("r" ,"5")               .attr("cy","50%");            var down_ball=function()               {svg.selectAll("circle")               .transition()               .delay(function(d,i){return i*150;})               .duration(500)               .attr("cy","90%")               .each("end",up_ball);}            var up_ball=function()               {svg.selectAll("circle")               .transition()               .delay(function(d,i){return i*150;})               .duration(500)               .attr("cy","5%")               .each("end",down_ball);}                    var color_change=function(){d3.select("rect")               .transition()               .duration(500)               .attr("fill", "hsl(" + (Math.random() * 360) + ",100%,50%)")               .each("end",color_change);}                color_change();                down_ball();</script></body></html>
0 0