Html 如何保留现有SVG形状而不是替换它们？

每按一次按钮都会替换rect中现有的文本和id。同时在视图框中保留以前的形状和文本。相反，它只是替换现有的形状和id，不显示旧的形状和id。我做错了什么？任何帮助都将不胜感激

<svg class="myViewbox" id="viewBoxId" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg">
    <g></g>
</svg>

编辑： 如果要附加新的rect/text组，请将第一个选择设置为svg容器

使用子对象数作为

索引

垂直重新定位组，否则它们会重叠

函数myFunction（单击的\u id）{
const svg=d3.select（'svg'）；
const num_g_children=svg.node（）.children.length；
常量g=svg.append（'g'）
.attr（'transform'，'translate（0，${num_g_children*95}）`）；
g、 追加（'rect'）
.attr（'id'，'node\u block'）
.attr（'x'，50）
.attr（'y'，20）
.attr（'rx'，20）
.attr（'ry'，20）
.attr（'width'，145）
.attr（'height'，95）
.attr（'transform'，'translate（0，-15'））
.attr（'填充'，'白色'）
.style（'stroke'，'black'）
.样式（“笔划宽度”，5）；
g、 追加（'文本'）
.text（单击的\u id）
.attr（'id'，'node_name'））
.attr（'x'，0）
.attr（'y'，15）
.attr（'transform'，'translate（105,43）'）；
}

试验

编辑： 如果要附加新的rect/text组，请将第一个选择设置为svg容器

使用子对象数作为

索引

垂直重新定位组，否则它们会重叠

函数myFunction（单击的\u id）{
const svg=d3.select（'svg'）；
const num_g_children=svg.node（）.children.length；
常量g=svg.append（'g'）
.attr（'transform'，'translate（0，${num_g_children*95}）`）；
g、 追加（'rect'）
.attr（'id'，'node\u block'）
.attr（'x'，50）
.attr（'y'，20）
.attr（'rx'，20）
.attr（'ry'，20）
.attr（'width'，145）
.attr（'height'，95）
.attr（'transform'，'translate（0，-15'））
.attr（'填充'，'白色'）
.style（'stroke'，'black'）
.样式（“笔划宽度”，5）；
g、 追加（'文本'）
.text（单击的\u id）
.attr（'id'，'node_name'））
.attr（'x'，0）
.attr（'y'，15）
.attr（'transform'，'translate（105,43）'）；
}

试验

测试此代码后，我看到它替换了现有的组，并且没有保持原来的显示不变。使用开发工具进行的进一步分析证实，该组正在被替换。我以前的代码为第一次按钮按下和附加到该组的每一次按钮按下添加了SVG。我想做的是附加整个组，每次按下按钮都会创建一个新组，该组将附加到该组，然后显示通过多次按下按钮创建的所有组。@Daniel我不明白你的问题，所以每次按下按钮时都要附加/添加新的rect/文本组？所以你的初始代码就快到了，请确认这是否是我的行为，我会更新我的回答，关于我对问题的措辞。是的，我想在每次按下按钮时追加一个新的rect/add rect。谢谢你的帮助。更新工作几乎完美@cal_br_mar我有拖动功能，但现在它不工作了。我最初是单独拖动组的。是否仍要拖动节点或组？这是我的拖拽代码<代码>var dragcontainer=d3.drag（）.on（“drag”，函数（d，i）{d3.select（this）.attr（“transform”，“translate”（+（d.x=d3.event.x）+）”，“+（d.y=d3.event.y）+”）；d3.selectAll（'g'）.datum（{x:0，y:0}）.call（dragcontainer）我还没有足够的声望点数来显示投票结果，我肯定投了更高的票。非常感谢你的帮助！测试完这段代码后，我看到它替换了现有的组，并且没有保持原来的显示不变。使用开发工具进行的进一步分析证实，该组正在被替换。我以前的代码为第一次按钮按下和附加到该组的每一次按钮按下添加了SVG。我想做的是附加整个组，每次按下按钮都会创建一个新组，该组将附加到该组，然后显示通过多次按下按钮创建的所有组。@Daniel我不明白你的问题，所以每次按下按钮时都要附加/添加新的rect/文本组？所以你的初始代码就快到了，请确认这是否是我的行为，我会更新我的回答，关于我对问题的措辞。是的，我想在每次按下按钮时追加一个新的rect/add rect。谢谢你的帮助。更新工作几乎完美@cal_br_mar我有拖动功能，但现在它不工作了。我最初是单独拖动组的。是否仍要拖动节点或组？这是我的拖拽代码<代码>var dragcontainer=d3.drag（）.on（“drag”，函数（d，i）{d3.select（this）.attr（“transform”，“translate”（+（d.x=d3.event.x）+）”，“+（d.y=d3.event.y）+”）；d3.selectAll（'g'）.datum（{x:0，y:0}）.call（dragcontainer）我还没有足够的声望点数来显示投票结果，我肯定投了更高的票。非常感谢你的帮助！

function myFunction(clicked_id) {   
    d3.select('g')
        .append('rect')
        .attr('id','node_block')
        .attr('x',50)
        .attr('y',20)
        .attr('rx',20)
        .attr('ry',20)
        .attr('width',145)
        .attr('height',95)
        .attr('transform','translate(0,-15)')
        .attr('fill','white')
        .style('stroke','black')
        .style('stroke-width',5);

    d3.select('g')
        .append('text')
        .text(clicked_id)
        .attr('id','node_name')
        .attr('x',0)
        .attr('y',15)
        .attr('transform','translate(105,43)');
}