如何在 D3 中对我的圈子进行分组后附加 <g> 元素？

Question

我有一堆圈子。我首先将圆圈想象如下：

circle = svg.selectAll('circle')
        .data(csv)
        .enter()
        .append("circle")
        .attr("stroke", "black")
        .attr("id", function(d,i){return "id_" + i.toString();})
        .attr("class", function(d){return "Color_" + d.Cyl;})
        .attr("fill", function(d) {return color(d.Cyl);})
        .attr("cx", function(d) { return Scale.xScale(d.Weight); })
        .attr("cy", function(d) { return Scale.yScale(d.DealerCost); })
        .attr("r", r)
        .call(drag);

然后在我的代码中的某个时刻，我使用 nest() 函数根据特定键对这些圆圈进行分组。

var data = d3.nest()
                  .key(function(d) { return d.Cyl;})
                  .rollup(function(d) { 
                  return d3.sum(d, function(g) {return Number(g.value); });
    }).entries(csv);

然后使用以下代码更新圆圈的位置

 for(j=0; j<data.length;j++)
    {
            svg        
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key+ " Cylinder")+ (i%val)*r*2;})    
                .attr("cy", function(d,i) { return StachChartHeight - (Math.floor(i/val))*r*2;})
    }

我正在尝试使用以下代码将每个类别的圆圈添加到 "g" 元素，但它不起作用。事实上，我需要 3 个不同的 "g" 标签，每个标签都包含一组圆圈。

 for(j=0; j<data.length;j++)
    {
            svg 
                .append("g") // this is what I added       
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key+ " Cylinder")+ (i%val)*r*2;})    
                .attr("cy", function(d,i) { return StachChartHeight - (Math.floor(i/val))*r*2;})
    }

有什么想法吗？

Answer 1

就像您的评论所说...使用 d3 'move' 元素到另一个元素的一种方法是 select 元素，remove 它们，然后将它们附加到另一个元素。对你来说，它可能看起来像这样：

for(j=0; j<data.length; j++) {
    var circlesToMove = svg.selectAll(".Color_" + data[j].key).remove();
    svg.append("g")
       .data(circlesToMove).enter()
       .append(function(d){ return d.node(); });
}

请注意，在从 dom 中取出元素后，删除 returns 中的 selection。

如何在 D3 中对我的圈子进行分组后附加 <g> 元素？

How to append <g> element after grouping my circles in D3?

javascript

d3.js

nvd3.js