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/