1 var width = 600; 2 var height = 400; 3 4 var svg = d3.select("#body") 5 .append("svg") 6 .attr("width",width) 7 .attr("height",height) 8 9 //打印d3.svg.symboltypes数组里面的符号 10 console.log(d3.svg.symboltypes) //输出["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]
1 var width = 600; 2 var height = 400; 3 4 var svg = d3.select("#body") 5 .append("svg") 6 .attr("width",width) 7 .attr("height",height) 8 9 //数组长度 10 var n = 30 11 12 //数组 13 var datalist = [] 14 15 //给数组添加元素 16 for (var i = 0 ; i < n ; i++){ 17 datalist.push({ 18 size : math.random() * 30 + 500 , //符号的大小 19 type : d3.svg.symboltypes[math.floor( 20 math.random() * d3.svg.symboltypes.length //符号的类型 21 )] 22 }) 23 }
1 //创建一个符号生成器 2 var symbol = d3.svg.symbol() 3 .size(function(d){return d.size}) 4 .type(function(d){return d.type})
1 //定义颜色 2 var color = d3.scale.category20b(); 3 4 //添加路径 5 svg.selectall() 6 .data(datalist) 7 .enter() 8 .append("path") 9 .attr("d",function(d){return symbol(d)}) 10 .attr("transform",function(d,i){ 11 var x = 100 + i % 5 * 50; 12 var y = 100 + math.floor(i/5) * 50; 13 return "translate("+ x + "," + y + ")" 14 }) 15 .attr("fill",function(d,i){ 16 return color(i) 17 })
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论