D3.js如何選擇上一階元素（Panent Node）

先來看下列 d3.js 的程式碼，我要產生兩個不同大小、顏色的圓形

svg_test03 = d3.select("#svg_test03")
svg_test03_g = svg_test03.append('g')
svg_test03_g
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 50)
  .attr('fill','#ff0000')
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 40)
  .attr('fill','#ffffff')

其產生的svg碼如下，第二個圓被包在第一圓的程式碼之中，顯然這並不符合我們的需求，實際上第二個圓在網頁上也是沒有顯示出來

我們要的結果應該是兩個圓形都要在<g>元素底下才對。我們修改一下程式碼，讓第二個圓在新建時應該先取得上一階元素（<g>）

svg_test03_g
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 50)
  .attr('fill','#ff0000')
  .select(function() { return this.parentNode; }) //取得上一階元素
  .append('circle')
  .attr('cx', 80 )
  .attr('cy', 60)
  .attr('r', 40)
  .attr('fill','#ffffff')

利用this.parentNode來取得上一階元素後再增加第二個圓，此時svg才會符合我們的期待，網頁上也才能正確顯示兩個圓形

如果要取得上二階的元素時，可以使用兩次的this.parentNode：

.select(function() { return this.parentNode; }) 

.select(function() { return this.parentNode; }) //利用兩次來取得上兩階的元素