Connecting SVG rectangles

Question

i would like to get some ideas on how to build dynamic connections between SVG rectangles created by JavaScript. I have already created the rectangles and I can even create them from a website by dropping them into a specific area.

My problem now is on how can I connect them? The goal is to connect them so that when I move one rectangle, the link between that rectangle and his children doesn't fade away or stay static and dynamically make the children follow their parent position.

I want for the objects that have a parentId > 0, to have a link between them and their parent. I'm sharing some code for you to get the idea of what i'm doing.

Best regards!

$.each($.parseJSON(objString1), function (idx, obj) {


                rect = document.createElementNS(svgNS, 'rect');


                if (obj.ParentId == 0) {

                    rect.setAttribute('id', "rec1");
                    rect.setAttribute('x', 224);
                    rect.setAttribute('y', 34);
                    rect.setAttribute('width', 188);
                    rect.setAttribute('height', 68);                    
                    rect.setAttribute('class', "draggableOrgUnit");
                    rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");
                    rect.setAttribute('onmousedown', "selectElement(evt)");
                    recpai = "rec1";

                }

                else if (obj.ParentId == 1)
                {
                    for (i = 0; i < length; i++)
                    {
                        if (arr[i] != 1)
                        {
                            arr[i] = 1;
                            x = 80 + i * 200;
                            var currentid = i;
                            break;

                        }
                    }

                    rect.setAttribute('id', "rec" + obj.ChartId);
                    rect.setAttribute('x', x);
                    rect.setAttribute('y', 190);
                    rect.setAttribute('width', 110);
                    rect.setAttribute('height', 60);
                    rect.setAttribute('fill', '#95B3D7');
                    rect.setAttribute('class', "draggablePos");
                    rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");
                    rect.setAttribute('onmousedown', "selectElement(evt)");



               }                  


                else
                {
                    rect.setAttribute('id', "rec" + obj.ChartId);
                    rect.setAttribute('x', 80.5);
                    rect.setAttribute('y', 268);
                    rect.setAttribute('width', 90);
                    rect.setAttribute('height', 60);
                    rect.setAttribute('fill', '#404040');
                }

                svg.appendChild(rect);

            });

            div.append(svg);

Answer 1

I think the best approach would be to append the elements to a <g> element and translate the <g> rather than the individual elements.