d3.js - 选择附加元素

Question

我正在尝试将所有元素嵌套在一个顶级组中。 我认为d3的选择是附加的最后一个元素，但当我这样做时：

    svg
    .attr("width", vizW + margin.left + margin.right)
    .attr("height", vizH + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

我明白了：

我如何将组作为选择而不是SVG本身？

由于

Answer 1

嗯，我想我只需要挖一点，

为了让小组成为选择，必须单独宣布：

var viewport = svg.append('g')

干杯

Answer 2

您认为正确 - 返回的选择是附加的最后一个元素。

所以要在父g中嵌套g元素，你想要做的是：

var outer_g = svg
   .attr("width", vizW + margin.left + margin.right)
   .attr("height", vizH + margin.top + margin.bottom)
 .append("g") // this will cause the outer 'g' selection to be returned
   .attr('class', 'outer_g')
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var inner_gs = outer_g.selectAll('.inner_g')
   .data(the_data)
   .enter()
 .append('g') // this will cause 'inner_gs' to hold  a selection of the inner 'g' elements
   .attr('class', 'inner_g);

这将创建您想要的结构