Question

我想了解如何在JavaScript创建的SVG矩形之间建立动态连接。我已经创建了矩形，我甚至可以通过将它们放入特定区域来从网站创建它们。

我现在的问题是如何连接它们？目标是连接它们，这样当我移动一个矩形时，该矩形与其子项之间的链接不会消失或保持静止并动态地让孩子们按照其父位置。

我想要拥有parentId＆gt;的对象0，在他们和他们的父母之间建立联系。我正在为你分享一些代码来了解我正在做的事情。

祝你好运！

$.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

我认为最好的方法是将元素附加到<g>元素并翻译<g>而不是单个元素。

连接SVG矩形

1 个答案: