Я работаю над проектом построителя запросов. Я пытаюсь построить генератор запросов, используя d3.js. Я застрял в той части, где хочу переместить определенные элементы в трансформирующуюся группу. ЭтоСделки рЕПО и я застрял в этомфункция, Я хочу переместить операторов после подключения и обновить подключенные линии. Может кто-нибудь мне помочь?

var circleDrag = d3.behavior.drag()
    .on('dragstart', function () {
        d3.event.sourceEvent.stopPropagation();

    })
    .on('drag', function () {
        var parentQboxGroupId = d3.select(this).select(function () {
            return this.parentNode;
        });
        var grandParent = parentQboxGroupId.select(function(){
            return this.parentNode;
        });

        var drawingGroup = d3.select('#'+grandParent.attr('id'));
        var currentC = d3.select(this);

            dragging = true;
            drawingGroup
            .select('.lineInsideQbox')
            .attr('x1', currentC.attr('cx'))
            .attr('y1', currentC.attr('cy'))
            .style('stroke','green')
            .style('stroke-width','2px');

        dummyLine.src = currentC.attr('id');
        console.log('CIRCLE IS BEING DRAGGED' + JSON.stringify(dummyLine));


    })
    .on('dragend', function () {
        console.log('drag circle end');

        //if(!selectedCircle.id){
        //    dummyLine.target = selectedQbox.id;
        //}
        dummyLine.target = selectedCircle.id;
        dragging = false;

        console.log('DRAG END : SELCTED NODE : '+ JSON.stringify(selectedCircle));
        console.log('DRAG END : DUMMY LINE : '+ JSON.stringify(dummyLine));

        var targetNode = d3.select('#'+dummyLine.target);
        var srcNode = d3.select('#'+dummyLine.src);
        console.log('split : ' + dummyLine.src.split('--'));

        var group = '#' + (dummyLine.src).split('--')[1];
        console.log('G: ' + group);
        d3.select(group).append('line')
            .attr('id', function () {


                var a = (dummyLine.src).split('--');
                var b = (dummyLine.target).split('--');
                if( a[0]== 'nodeRight'){
                    return dummyLine.src + '__' + dummyLine.target;
                }else{
                    return dummyLine.target + '__' + dummyLine.src;
                }

            })
            .attr('class', function () {
                var a = (dummyLine.src).split('--');
                var b = (dummyLine.target).split('--');
                return 'line '+ a[1]+' '+b[1];
            })
            .attr('x1', srcNode.attr('cx'))
            .attr('y1',srcNode.attr('cy'))
            .attr('x2',targetNode.attr('cx'))
            .attr('y2',targetNode.attr('cy'))
            .style('stroke', 'black')
            .style('stroke-width', '3px')
        ;
        dummyLine.src = null;
        dummyLine.target = null;
    });

РЕДАКТИРОВАТЬ: Когда я пытаюсь сбросить окно запроса. Я могу бросить других операторов внутри него. Тогда я смогу соединить их внутри. Вот изображение, показывающее, что я пытаюсь.

После того, как соединения сделаны, я пытаюсь переместить большую коробку и маленьких операторов по отдельности. Вот где код ломается.