符号图标

Symbol

var dataSet = [];
   var svg = d3.select("body").append("svg").attr("width",600).attr("height",600);
   for (var i = 0;i<10;i++){
       dataSet.push({
           size:Math.random()*30+120, 
//           快速生成随机角标 d3.svg.symbolTypes中是d3所支持的符号数组
           type:d3.svg.symbolTypes[Math.floor(Math.random()*d3.svg.symbolTypes.length)]
       })
   }
   var symbolPath = d3.svg.symbol().size(function (d) {
       return d.size;
   }).type(function (d) {
       return d.type;
   });
   var color = d3.scale.category10();
   svg.selectAll("path").data(dataSet).enter().append("path").attr("d",function (d) {
       return symbolPath(d);
   }).attr("transform",function (d,i) {
       var x = 50+i%5*20;
       var y = 50+Math.floor(i/5)*20;
       return "translate("+x+","+y+")";
   }).attr("fill",function (d,i) {
       return color(i);
   })

结果:

Symbol

你可能感兴趣的:(符号图标)