d3.js - 选择附加元素

我试图让所有元素嵌套在一个顶级组中。我觉得D3的选择就是追加的最后一个元素，但是当我这样做：d3.js - 选择附加元素

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

我得到这个：

enter image description here

我怎么能集团作为选择，而不是SVG本身？

感谢

来源

2013-05-07 BarakChamo

嗯，我想我只是挖一点点，

为了使集团作为一个选择它必须另外声明：

var viewport = svg.append('g')

干杯

来源

2013-05-07 08:30:53 BarakChamo

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

所以巢父母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);

这将创建结构，你的愿望

来源

2015-03-29 13:28:49 sangil

d3.js - 选择附加元素

回答

相关问题