svg - 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元素嵌套在 parentg中，您要做的是：

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);

这将创建您想要的结构