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

Question

每按一次按钮都应该是将现有的文字和id一起替换在矩形内。同时在视图框中保留以前的形状和文本。但它只是替换现有的形状和id，而不显示旧的形状和id。 我到底做错了什么？任何帮助将被感激。

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

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

Answer 1

edit:如果你想添加新的矩形文本组，让你的第一个选择svg容器。

使用孩子的数量作为 index 用于重新定位组的垂直位置，否则就会重叠。

function myFunction(clicked_id) {   
   const svg = d3.select('svg');
   const num_g_children = svg.node().children.length;
   const g = svg.append('g')
                .attr('transform', `translate(0,${num_g_children*95})`);
       
       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);

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

<script src="https://d3js.org/d3.v5.min.js"></script>
<div>
<button onclick=myFunction(~~(10*Math.random()))>Test</button>
<svg class="myViewbox" id="viewBoxId" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg">
</svg>
</div>