<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>D3 tutorial</title>
<!--
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-->
<script src="d3.min.js" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<script >
// circle
//圆心x坐标 cy圆心y坐标 r半径
var margin = 50,
width = 1200,
height = 800;
var svgrange=d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", function() { return "#a3b466"; });
var circleNum=1000;
var N=1;
for(N;N<=circleNum;N++){
svgrange.append("circle")
.attr("cx", function() { return 50+Math.round(Math.random())*7.5+Math.round(Math.random())*385+N*Math.round(Math.random()); })
.attr("cy", function() { return 40+56.34*Math.round(Math.random())*Math.round(Math.random()*5.30); })
.attr("r", function() { return Math.round(Math.random()*2.14)*15; })
.attr("stroke", function() { return "orange"; })
.style("fill", function() { return getColorRandom() ; });
console.log( Math.random());
//.text(function(d){return Math.round(circleNum)});
}
//var color1 = d3.rgb(40,80,0);
function getColorRandom(){
var tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var r= tmp;
tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var g= tmp;
tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var b= tmp;
return d3.rgb(r,g,b);
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/rojas/p/4973430.html