D3.js:如何遵循一般更新模式来转换嵌套元素?

时间:2013-04-29 23:23:31

标签: d3.js

我正在与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>

我希望能够在每个元素上显式访问update / enter / select选项。我的数据如下:

[
{ "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”条目应该向下移动,但事实并非如此。

1 个答案:

答案 0 :(得分:4)

它工作正常,你只需要改变你定位g元素的方式。

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

<g>元素没有x&amp; y属性,因此您必须使用svg转换来定位它。

以下是有关它的更多信息:https://developer.mozilla.org/en-US/docs/SVG/Element/g

调整后的示例:http://jsfiddle.net/e2vdt/10/