如何翻译svg g元素以与兄弟姐妹融洽相处？

这就是你如何翻译

g

元素以适合他们的孩子，在任何深度层次上吗？
当child展开时，我必须手动转换它们

我是svg和d3的新手。

---

谢谢。

看起来您需要跟踪高度的总和，并以此进行转换。也就是说，对于您添加的每个矩形，将其高度添加到总数中，然后您可以使用该总数来偏移后续元素。

您通常会将

g

元素放置在预定义的位置，例如，通过计算屏幕的大小和元素的数量。你能给我们一些背景吗？你想做什么？如果所有的矩形都有可变的高度，我该如何转换父gs？我不知道它们的高度，但我需要偏移矩形的父对象，这取决于您的上下文。你能计算高度吗？是的，但只有在附加了

rect

之后，我才应该挖掘数组，计算每个孩子的w，h，然后创建包装器？

var boxes = [[30, 45], [50, 30], [40, 30]];  // [w, h]

//Should i calculate `translate` value  here, adding all heights? 

var secs = wrapper.selectAll('g.section')
 .data(data)
 .enter()
 .append('g')
 .attr('class', 'section')
     .attr("transform", "translate(" + 0 + "," + 'unknown' + ")");

//could be many sub-secs by a lot of data transformation before appending rect to the last one of them.

secs.append('rect')
     .datum(function(d){return d;})
     .attr('class', 'fragment')
     .attr('x', 0)
     .attr('y', 0)
     .attr('width', function(d){return d[0];})
     .attr('height', function(d){return d[1];})

// or here, not from data but from elem's dimensions?

secs.each(function(sec, i){
  var prev = this.previousSibling?this.previousSibling.getBBox():'';
  var ty = prev?prev.height+ prev.y:0;
  d3.select(this).attr("transform", "translate(" + 0 + "," + ty + ")");
});