d3創建多個svg元素
阿新 • • 發佈:2017-09-04
end 返回值 height mce function stroke rand 數組長度 arr
當然也可以創建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)‘);
d3創建多個svg元素