如何在 D3 中对我的圈子进行分组后附加 <g> 元素?
How to append <g> element after grouping my circles in D3?
我有一堆圈子。我首先将圆圈想象如下:
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;})
}
有什么想法吗?
就像您的评论所说...使用 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。
我有一堆圈子。我首先将圆圈想象如下:
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;})
}
有什么想法吗?
就像您的评论所说...使用 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。