1. 程式人生 > >d3創建多個svg元素

d3創建多個svg元素

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元素