d3创建多个svg元素

Posted 2020-10-05 大棒子

当然也可以创建dom

 

var svg = d3.select(‘#svg‘);

svg .slectAll(‘circle.bb‘)     //选中DOM中的所有circle.bb标签，当DOM中不存在circle.bb时，那么这个返回值将是null

　　.data(new Array(50))   //计算并且传递数组的值，数组长度为50，因此所有经过此节点的处理过程将处理50次,每次对应数组中不同的元素值

　　.enter()　　　　//创建新的DOM元素，当数组的数据被传递至此，数组中的元素个数多于DOM中已有的circle.bb个数，enter()将会创建新的circle.bb元素来补充（推荐Google一下enter()和exit()具体使用方法）

　　.append(‘circle‘)　　//这里的circle.bb不够分时就创建一个circle。。。

　　.attr(‘cx‘,function(){

　　　　return svvg.width() / 2 + Math.random() * 40;
　　　})
　　.attr(‘cy‘,function(){
　　　　return svvg.height() / 2 + Math.random() * 40;
　　})
　　.attr(‘r‘,5)
　　.attr(‘stroke‘,‘rgba(255,0,0,0.7)‘)
　　.attr(‘fill‘,‘rgba(255,0,0,0.2)‘);