<body>
<svg id="mySVG" width="800" height="600" version="1.1" xmlns=""></svg>
<script type="text/javascript">
var mysvg = document.getElementById("mySVG");
var rec= new Array();
for(var i=0;i<6;i++){
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
var h=Math.random()*300;
//rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(400-h)+" width=70 height="+h+" style='fill:red'/>";
//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,255)'/>";
//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
rec[i].outerHTML="<rect x="+(45*i)+" y="+(400-h)+" width=42 height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";
}
</script>
</body>
树状词云
<svg id="mySvg" width=800 height=600 ></svg>
<script>
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var mysvg = document.getElementById("mySvg");
mysvg.setAttribute("width",w*0.96);
mysvg.setAttribute("height",h*0.99);
var rate=0.7;
var x0=w/2;
var y0=h;
var count=7;
var str="依依袅袅复青青";
var fontsize=40;
var length=str.length*fontsize;
var iter=0
function show(x0,y0,length,rate,a,count){
iter++;
var x1=x0;
var y1=y0;
fontsize=count*3;
length=str.length*fontsize;
var x2=x1+length*Math.cos(a);
var y2=y1+length*Math.sin(a);
var myText=document.createElement("text");
mysvg.appendChild(myText);
//myText.outerHTML="<text x="+(x1)+" y="+y1+" style='fill:green;font-size:"+(count*2)+"' rotate=90 >"+str+"</text>";
//myText.outerHTML="<text x="+(x1)+" y="+y1+" style='fill:green;font-size:"+(count*2)+"' transform='rotate(90,"+x1+","+y1+")' >"+str+"</text>";
myText.outerHTML="<text id="+iter+" x="+(x1)+" y="+y1+
" style='fill:rgb(0,"+Math.floor(255*Math.random())+",0);font-size:"+(fontsize)+
"' transform='rotate("+(a*180/Math.PI)+","+x1+","+y1+")' >"+str+"</text>";
var aL=a-Math.PI/4*(0.5+0.5*Math.random());
var aR=a+Math.PI/4*(0.5+0.5*Math.random());
if (count<=1){
var myCircle=document.createElement("circle");
mysvg.appendChild(myCircle);
myCircle.outerHTML="<circle cx="+x1+" cy="+y1+" r="+(6*Math.random())+" fill='red'/>"
}
if(count>0){
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
show(x0,y0,length,rate,-Math.PI*7/16,count);
show(x0,y0,length,rate,-Math.PI*9/16,count);
</script>
</body>
D3数据可视化基础
直方图
<body>
<script src="../d3.v3.min.js" charset="utf-8"></script>
<script>
var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
var color = d3.scale.category10();
var dataset =new Array(10);
for (var i=0;i<dataset.length;i++){
dataset[i]=height*Math.random();
}
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr("height", height);//设定<svg>的高度属性
//矩形所占的宽度(包括空白),单位为像素
var rectStep =width/dataset.length;
//矩形所占的宽度(不包括空白),单位为像素
var rectWidth =rectStep-10;
var rect = svg.selectAll("rect")
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("rect") //添加rect元素,使其与绑定数组的长度一致
.attr("x", function(d,i){ //设置矩形的x坐标
return i * rectStep;
})
.attr("y", function(d){ //设置矩形的y坐标
return height-d;
})
.attr("fill", function(i){
return color(i);
})
.attr("width",rectWidth) //设置矩形的宽度
.attr("height",function(d){ //设置矩形的高度
return d;
});
var text = svg.selectAll("text")
.data(dataset) //绑定数据
.enter() //获取enter部分
.append("text") //添加text元素,使其与绑定数组的长度一致
.attr("fill","green")
.attr("font-size","24px")
.attr("text-anchor","middle")
.attr("x", function(d,i){
return i * rectStep;
})
.attr("y", function(d){
return height-d-26;
})
.attr("dx",rectWidth/2)
.attr("dy","1em")
.text(function(d){
return Math.floor(d);
});
</script>
</body>
饼图
<body>
<script src="../d3.v4.min.js" charset="utf-8"></script>
<script>
var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
var width = w*0.98;
var height =h*0.96;
var dataset = [["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.pie()
.value(function(d){return d[1];});
var piedata = pie(dataset);
var outerRadius = 150; //外半径
var innerRadius = 100; //内半径,为0则中间没有空白
var arc = d3.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius); //设置外半径
var color = d3.scaleOrdinal(d3.schemeCategory10);
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (height/2) +")");
arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d);//将角度转为弧度(d3使用弧度绘制)
});
</script>
</body>