之前用 [[d3.js]] 測試綁定資料時，都是參考網路上的教學，也都是比較簡單的單一元素，今天測試如果我的圖形需要多個圖層元素組合而成，那應該要如何做呢？
一開始我的想法是用function，把圖層元素組合的程式包成一個function，接著將元素的一些參數都改成變數，要產生幾個就呼叫幾次function，這樣的做法測試是可行的。雖然用function可以解決，但是好像不符 [[D3.js]] 的理念，所以又在網路上多多學習，果然是我對它不夠了解，沒有用到它精華的地方。
這次測試的想法是，我有兩個圓，外圓比較大，內圓比較小且是白色的，所以兩個圓疊起來就像是一個甜甜圈，而我想要產生三個甜甜圈，而這三個甜甜圈有不同的大小與顏色。
測試成功的程式碼如下：
HTML：
<div>
<svg id="svg_test02" width="500" height="300"></svg>
</div>
Javascript：
// circle_cx是圓心x的座標位置；circle_r_o是外圓的半徑；circle_r_i是內圓的半徑；fill_d是外圓的顏色json_text02 = [{"circle_cx": 80,"circle_r_o": 50,"circle_r_i": 40,"fill_d":"#FF0000"},{"circle_cx": 200,"circle_r_o": 60,"circle_r_i": 50,"fill_d":"#00FF00"},{"circle_cx": 350,"circle_r_o": 70,"circle_r_i": 60,"fill_d":"#0000FF"} ]svg_test02 = d3.select("#svg_test02")//先產生多個<g>，因為陣列有3個元素，所以會新增3個新的<g>。因為實際沒有元素，所以要用.enter()增加<g>元素svg_test02_g = svg_test02.selectAll('g').data(json_text02).enter().append('g')//選擇所有的<g>，並增加外圓，因為實際沒有元素，所以要用.enter()svg_test02_g.selectAll('g').data(json_text02).enter().append('circle').attr('cx', (d) => { return d.circle_cx} ).attr('cy', 150).attr('r', (d) => { return d.circle_r_o}).attr('fill',(d) => { return d.fill_d })//選擇所有的<g>，並增加內圓，因為實際沒有元素，所以要用.enter()svg_test02_g.selectAll('g').data(json_text02).enter().append('circle').attr('cx', (d) => { return d.circle_cx} ).attr('cy', 150).attr('r', (d) => { return d.circle_r_i}).attr('fill','#ffffff') //固定白色
執行結果如下：
