d3.js小例子

var jd=[{id:1,text:"新浪200",count:200,color:'rgb(158,154,200)',x:120,y:300},
              {id:2,text:"微信152",count:152,color:'rgb(49,130,189)',x:420,y:100},
              {id:3,text:"QQ324",count:324,color:'rgb(116,196,118)',x:220,y:200},
              {id:4,text:"默默218",count:218,color:'rgb(107,174,214)',x:220,y:100}
];


var diameter = 500;

var svg= d3.select("body").append("svg").attr({"width":diameter,"height": diameter,"id":"distribute"});
var t = svg.append("text").text("2014人脉分布图").attr({"text-anchor":"middle","y":25,"x":diameter/2,"color":"#333333","font-size":"18px","fill":"#333333"});
var g = svg.selectAll("g").data(jd).enter().append("g").attr("transform",function(d){return "translate("+d.x+","+d.y+")"});

var title= g.append("title").text(function(d){return d.text});
var circle = g.append("circle").text(function(d){return d.count}).attr("r",function(d){return d.count/7}).style("fill", function(d){return d.color});
var text = g.append("text").text(function(d){return d.text}).attr("dy", ".3em").style("text-anchor", "middle");

效果如下：