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>

我希望能够在每个元素上显式访问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”条目应该向下移动，但事实并非如此。

Answer 1

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

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

1 个答案: