D3.js：如何遵循一般更新模式來轉換嵌套元素？

Question

我正在與D3.js合作，並正在學習general update pattern。我知道它的簡單數據結構（我想！），但我想創建一個嵌套的DOM元素集：包含路徑和文本元素的組。我不清楚如何訪問嵌套的元素的更新/輸入/退出選擇。

總之，這是我想結束了SVG結構：

<g class="team"> 
<path class="outer" d="..."></path> 
<text class="legend" x="890" dy=".2em" y="23">Red Sox</text> 
</g> 
<g class="team"> 
<path class="outer" d="..."></path> 
<text class="legend" x="890" dy=".2em" y="23">Yankees</text> 
</g> 

而且我希望能夠明確地訪問更新/輸入/選擇選擇每個元素。我的數據是這樣的：

[ 
{ "name": "Red Sox", "code": "RED", "results": [...] }, 
{ "name": "Yankees", "code": "YAN", "results": [...] }, 
] 

這是我的代碼 - 看到它在全在的jsfiddle：http://jsfiddle.net/e2vdt/6/

function update(data) { 

    // Trying to follow the general update pattern: 
    // http://bl.ocks.org/mbostock/3808234 

    // Join new data with old elements, if any. 
    var g = vis.selectAll("g.team").data(data, function(d) { 
    return d.code; 
    }); 

    // Update old elements as needed. 
    // QUESTION: How to get the update selection for the text elements? 
    // Currently the text element is not moving to the right position. 
    g.selectAll("text.legend").transition() 
    .duration(750) 
    .attr("y", function(d, i) { return i * 32 + 100; }); 

    // Create new elements as needed. 
    var gEnter = g.enter() 
     .append("g").attr("class","team"); 
    gEnter.append("text").attr("class", "legend") 
     .attr("dy", ".35em") 
     .attr("y", function(d, i) { return i * 32 + 100; }) 
     .attr("x", "20") 
     .style("fill-opacity", 1e-6) 
     .text(function(d) { return d.name; }) 
     .transition() 
     .duration(750) 
     .style("fill-opacity", 1); 
    // TBA: Add path element as well. 

    // Remove old elements as needed. 
    g.exit() 
    .transition() 
    .duration(750) 
    .attr("y", "0") 
    .style("fill-opacity", 1e-6) 
    .remove(); 

} 

的進入和退出的選擇都工作正常，但我不知道知道如何獲取更新選擇，以便我可以將文本標籤移動到正確的位置。 「Red Sox」條目應該沿着頁面向下移動，但事實並非如此。

Answer 1

它工作正常，你只需要改變你如何定位g元素。

g.transition() 
    .duration(750) 
    .attr("transform", function(d, i) { 
     return "translate(0,"+(i * 32 + 100)+")"; 
    }); 

的<g>元素沒有x & y屬性，所以你必須使用SVG變換定位。

下面是一些關於它的更多信息：https://developer.mozilla.org/en-US/docs/SVG/Element/g

的調整例如：http://jsfiddle.net/e2vdt/10/