Javascript D3如何替换SVG元素

我有一个类似svg的

<svg>
<g>
  <rect x='0' y='0' height='20' width='20' class='shape rect'/>
  <text x='10' y='10' text-anchor='middle' alignment-baseline='middle'>A</text>
</g>
</svg>

这将在覆盖文本的

元素之后向组中追加一个新项。如何在构建新数据时指定元素的位置

编辑：

使用将附加圆作为其父元素

的最后一个子元素。因为SVG元素是按文档顺序呈现的，所以这将覆盖位于新添加的圆圈之前的文本。可以使用在组中的第一个元素之前插入圆，从而在文本元素之前插入圆

//新用户数据
var myData=[{
正文：'A'，
形状：'圆形'，
x:10，
y:10
}];
//删除现有形状并替换为新形状
var svg=d3.select（'svg'）；
var g=svg.select（'g'）；
var sh=g.select（'.shape'）；
sh.删除（）；
var newsh=g.selectAll（'.shape'）.data（myData）；
newsh.enter（）.insert（'circle'，'：第一个子项'）.attr({
“cx”：函数（d）{返回d.x；}，
“cy”：函数（d）{返回d.y；}，
“r”：10
})
.分类（“形状圆”，正确）
文本{
填充物：白色；
}

A.
使用将圆附加为其父元素
的最后一个子元素。因为SVG元素是按文档顺序呈现的，所以这将覆盖位于新添加的圆圈之前的文本。可以使用在组中的第一个元素之前插入圆，从而在文本元素之前插入圆


//新用户数据
var myData=[{
正文：'A'，
形状：'圆形'，
x:10，
y:10
}];
//删除现有形状并替换为新形状
var svg=d3.select（'svg'）；
var g=svg.select（'g'）；
var sh=g.select（'.shape'）；
sh.删除（）；
var newsh=g.selectAll（'.shape'）.data（myData）；
newsh.enter（）.insert（'circle'，'：第一个子项'）.attr({
“cx”：函数（d）{返回d.x；}，
“cy”：函数（d）{返回d.y；}，
“r”：10
})
.分类（“形状圆”，正确）
文本{
填充物：白色；
}

A.
您正在将圆的x和y位置设置为（10,10），这就在文本上方。您希望圆显示在哪里？形状应该显示在文本后面。您正在将圆的x和y位置设置为（10,10），这就在文本上方。你希望圆圈出现在哪里？形状应该出现在文本后面。
// New User Data
var myData = [{
  text:A,
  shape:'circle',
  x:10,
  y:10
}];

// Remove existing shape and replace with a new shape
var svg = d3.select('svg');
var g = svg.select('g');
var sh = g.select('.shape);
sh.remove();
var newsh = g.selectAll('.shape').data(myData);
newsh.enter().append('circle').attr({
  cx: function(d){ return d.x;},
  cy: funciton(d){ return d.y;},
  r:10
})
.classed('shape circle',true);