Question

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 + ")");
});

这是你如何翻译g元素以适合他们的孩子，在任何深度？当孩子扩张时，我将不得不手动翻译它们？

我是svg和d3的新人谢谢。

Answer 1

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

如何翻译svg g元素与兄弟姐妹一起舒适？

1 个答案: