4

我正在使用 D3.js，并学习一般更新模式。

我理解简单的数据结构（我认为！），但我想创建一组嵌套的 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();

}

进入和退出选择都工作正常，但我不知道如何获取更新选择，因此我可以将文本标签移动到正确的位置。“红袜队”条目应该在页面下方移动，但事实并非如此。

4

1 回答 1

4

它工作正常，你只需要改变你定位 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/

于 2013-04-30T01:26:25.153 回答