符号图标

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容