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

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

 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

就像你的评论所说的那样......一种移动的方法＆＃39;使用d3将元素转换为另一个元素是选择元素remove，然后将它们附加到另一个元素中。对你而言，它可能看起来像这样：

<ul ng-show="show=1">

请注意，在从dom中取出元素后，remove会返回选择。

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

1 个答案: