d3js Moving SVG elements inside a transforming group

Question

I am working on a query builder project. I am trying to build a query generator using d3.js. I am stucked in a part where I want to move certain elements inside a transformi

Answer 1

The main issue is that to move the operator, you use a translate to move the whole group ( tag) which includes the image, the two circles and the line. You then set the other end of the line using CX, CY values of the other operator it is connected to. This wont work because the CX and CY values of the circles are not updated when you perform a translate, so on a second move, it would put the x, y values at the original point of the circles, not to the moved point. To resolve, instead of translating the whole group, translate only the image, update the cx and cy values of the circles and then update the line x, y values with the new cx, cy of the circles:

All of the amendments needed are within your operatorDrag.js file. First of all, when you append the circles, add an attribute which holds the original cx and cy values. We will need these when calculating the new cx, cy when dragging the operator:

change from this:

 var op = currGroup
            .append('image')
            .attr('class', 'operator')
            .attr('width', elem.attr('width') * 0.75)
            .attr('height', elem.attr('height') * 0.75)
            .attr('x', d3.mouse(this)[0])
            .attr('y', d3.mouse(this)[1])
            .attr('xlink:href', elem.attr('href'));

        currGroup
            .append('circle')
            .attr('class', 'node nodeLeft')
            .attr('id', function () {
                return 'nodeLeft--' + currGroup.attr('id');
            })
            .attr('cx', op.attr('x'))
            .attr('cy', op.attr('height') / 2 + Number(op.attr('y')))
            .attr('r', 5)
            .style('fill', 'red')
            .on('mouseover', function () {
                selectedCircle = {
                    id: d3.select(this).attr('id'),
                    cls: 'nodeLeft'
                }
            })
            .call(circleDrag)
        ;

        currGroup
            .append('circle')
            .attr('class', 'node nodeRight')
            .attr('id', function () {
                return 'nodeRight--' + currGroup.attr('id');
            })
            .attr('cx', Number(op.attr('x')) + Number(op.attr('width')))
            .attr('cy', op.attr('height') / 2 + Number(op.attr('y')))
            .attr('r', 5)
            .style('fill', 'red')

            .on('mouseover', function () {
                selectedCircle = {
                    id: d3.select(this).attr('id'),
                    cls: 'nodeRight'
                }
            })
            .call(circleDrag)

        ;

To this (the updated code is contained in comments starting with #SB):

     var op = currGroup
                    .append('image')
                    .attr('class', 'operator')
                    .attr('width', elem.attr('width') * 0.75)
                    .attr('height', elem.attr('height') * 0.75)
                    .attr('x', d3.mouse(this)[0])
                    .attr('y', d3.mouse(this)[1])
                    .attr('xlink:href', elem.attr('href'));

                currGroup
                    .append('circle')
                    .attr('class', 'node nodeLeft')
                    .attr('id', function () {
                        return 'nodeLeft--' + currGroup.attr('id');
                    })
                    .attr('cx', op.attr('x'))
                    .attr('cy', op.attr('height') / 2 + Number(op.attr('y')))

                // #SB: add a reference to the original cx and cy position.
                // we will need it to set new cx cy when moving operator

                    .attr('data-cx', op.attr('x'))
                    .attr('data-cy', op.attr('height') / 2 + Number(op.attr('y')))
               //----------------------------------------------------------------------
                    .attr('r', 5)
                    .style('fill', 'red')
                    .on('mouseover', function () {
                        selectedCircle = {
                            id: d3.select(this).attr('id'),
                            cls: 'nodeLeft'
                        }
                    })
                    .call(circleDrag)
                ;

                currGroup
                    .append('circle')
                    .attr('class', 'node nodeRight')
                    .attr('id', function () {
                        return 'nodeRight--' + currGroup.attr('id');
                    })
                    .attr('cx', Number(op.attr('x')) + Number(op.attr('width')))
                    .attr('cy', op.attr('height') / 2 + Number(op.attr('y')))
                // #SB: add a reference to the original cx and cy position.
                // we will need it to set new cx cy when moving operator

                    .attr('data-cx', Number(op.attr('x')) + Number(op.attr('width')))
                    .attr('data-cy', op.attr('height') / 2 + Number(op.attr('y')))
               //----------------------------------------------------------------------
                    .attr('r', 5)
                    .style('fill', 'red')

                    .on('mouseover', function () {
                        selectedCircle = {
                            id: d3.select(this).attr('id'),
                            cls: 'nodeRight'
                        }
                    })
                    .call(circleDrag)

                ;

Once you have done this, go to your on drag method for the operators. This is the code we are going to change:

               .on('drag', function () {

                    var g = d3.select(this);

                    var currentOp = g.select('.operator');
                    var parent = g.select(function () {
                        return this.parentNode;
                    }).select('.qbox');


                    var dx = d3.event.x;
                    var dy = d3.event.y;

                    var mouse = {dx: d3.event.x, dy: d3.event.y};
                    var currentObj = {
                        x: currentOp.attr('x'),
                        y: currentOp.attr('y'),
                        width: currentOp.attr('width'),
                        height: currentOp.attr('height')
                    };
                    var parentObj = {
                        x: parent.attr('x'),
                        y: parent.attr('y'),
                        width: parent.attr('width'),
                        height: parent.attr('height')
                    };


                    //console.log('parent width : ' + parent.attr('width'));
                    //console.log('parent width : ' + currentOp.attr('width'));
                    //g.attr('transform', 'translate(' + x + ',' + y + ')');
                    var loc = getXY(mouse, currentObj, parentObj);
                    g.attr('transform', 'translate(' + loc.x + ',' + loc.y + ')');


                    d3.select('#' + g.attr('id')).selectAll('.line')[0].forEach(function (e1) {

                        var line = d3.select(e1);
                        console.log('-------------------');
                        console.log('line : ' + line.attr('id'));
                        console.log('-------------------');
                        var split = line.attr('id').split('__');
                        if(g.attr('id') == split[0]){
                            //change x2, y2
                            var otherNode = d3.select('#'+split[1]);
                            line.attr('x2', otherNode.attr('cx'));
                            line.attr('y2', otherNode.attr('cy'));
                        }else{
                            var otherNode = d3.select('#'+split[0]);
                            line.attr('x1', otherNode.attr('cx'));
                            line.attr('y1', otherNode.attr('cy'));
                        }


                    })


                }))

First thing is, do not translate the whole object, only the image:

              var g = d3.select(this);

                    var currentOp = g.select('.operator');

                    var parent = g.select(function () {
                        return this.parentNode;
                    }).select('.qbox');

                    //#SB: added a reference to the parent id
                    var parent_id = g.select(function () {
                        return this.parentNode;
                    }).attr('id');

                    //---------------------------------------

                    var dx = d3.event.x;
                    var dy = d3.event.y;

                    var mouse = {dx: d3.event.x, dy: d3.event.y};
                    var currentObj = {
                        x: currentOp.attr('x'),
                        y: currentOp.attr('y'),
                        width: currentOp.attr('width'),
                        height: currentOp.attr('height')
                    };
                    var parentObj = {
                        x: parent.attr('x'),
                        y: parent.attr('y'),
                        width: parent.attr('width'),
                        height: parent.attr('height')
                    };



                    var loc = getXY(mouse, currentObj, parentObj);


                    //#SB: Do not translate everything, the cx, cy values of the circle are not updated
                    // when translating which will make future moves calculate incorrectly
                    g.selectAll('image').attr('transform', 'translate(' + loc.x + ',' + loc.y + ')');

Then, instead of translating the circles, change their cx, and cy values using the original cx, cy and translate values:

                   g.selectAll('circle')
                    .attr('cx', function () {

                        return parseFloat(d3.select(this).attr('data-cx')) + parseFloat(loc.x);
                    })
                    .attr('cy', function () {

                        return parseFloat(d3.select(this).attr('data-cy')) + parseFloat(loc.y);
                    });

The last thing is the update to the lines. In your original code, you were selecting all lines within the operator group but you will actually miss some lines by only selecting this group. Some lines can be a part of another operator group but be connected to the operator that is moving. In this case we should select all lines within the parent group and check if the line is connected to the operator we are moving. If it is connected then we update the x and y values:

//#SB: Select all the lines in the parent group instead of only group of the
                        // operator we are moving. There can be lines that exists on other groups that 
                        // do not exist within the group that is being moved. 


                        d3.select('#' + parent_id).selectAll('.line')[0].forEach(function (el) {

var parent_id = g.attr('id')
                            var line = d3.select(el)
                            var nodeType = line.attr('id').split("__");  // id tells us if the line is connected to the left or right node
                            var operators = line.attr('class').split(" ");  // class holds info on what operators the line is connected to
                            var sourceCircleId = nodeType[0].split("--")[0] + '--' + operators[1];
                            var targetCircleId = nodeType[1].split("--")[0] + '--' + operators[2]; 

                           if (parent_id == operators[1] || parent_id == operators[2]) {  // the line is connected to the operator we are moving 

                                line.attr('x1', d3.select('#' + sourceCircleId).attr('cx'))
                                line.attr('y1', d3.select('#' + sourceCircleId).attr('cy'))
                                line.attr('x2', d3.select('#' + targetCircleId).attr('cx'))
                                line.attr('y2', d3.select('#' + targetCircleId).attr('cy'))

                            }

                        });

Complete OnDrag code:

             .on('drag', function () {

                    var g = d3.select(this);

                    var currentOp = g.select('.operator');

                    var parent = g.select(function () {
                        return this.parentNode;
                    }).select('.qbox');

                    //#SB: added a reference to the parent id
                    var parent_id = g.select(function () {
                        return this.parentNode;
                    }).attr('id');

                    //---------------------------------------

                    var dx = d3.event.x;
                    var dy = d3.event.y;

                    var mouse = {dx: d3.event.x, dy: d3.event.y};
                    var currentObj = {
                        x: currentOp.attr('x'),
                        y: currentOp.attr('y'),
                        width: currentOp.attr('width'),
                        height: currentOp.attr('height')
                    };
                    var parentObj = {
                        x: parent.attr('x'),
                        y: parent.attr('y'),
                        width: parent.attr('width'),
                        height: parent.attr('height')
                    };



                    var loc = getXY(mouse, currentObj, parentObj);


                    //#SB: Do not translate everything, the cx, cy values of the circle are not updated
                    // when translating which will make future moves calculate incorrectly
                    g.selectAll('image').attr('transform', 'translate(' + loc.x + ',' + loc.y + ')');

                    g.selectAll('circle')
                    .attr('cx', function () {

                        return parseFloat(d3.select(this).attr('data-cx')) + parseFloat(loc.x);
                    })
                    .attr('cy', function () {

                        return parseFloat(d3.select(this).attr('data-cy')) + parseFloat(loc.y);
                    });


                    //#SB: Select all the lines in the parent group instead of only group of the
                    // operator we are moving. There can be lines that exists on other groups that 
                    // do not exist within the group that is being moved. 


                    d3.select('#' + parent_id).selectAll('.line')[0].forEach(function (el) {

 var parent_id = g.attr('id')
                            var line = d3.select(el)
                            var nodeType = line.attr('id').split("__");  // id tells us if the line is connected to the left or right node
                            var operators = line.attr('class').split(" ");  // class holds info on what operators the line is connected to
                            var sourceCircleId = nodeType[0].split("--")[0] + '--' + operators[1];
                            var targetCircleId = nodeType[1].split("--")[0] + '--' + operators[2];  

                       if (parent_id == operators[1] || parent_id == operators[2]) {  // the line is connected to the operator we are moving 

                            line.attr('x1', d3.select('#' + sourceCircleId).attr('cx'))
                            line.attr('y1', d3.select('#' + sourceCircleId).attr('cy'))
                            line.attr('x2', d3.select('#' + targetCircleId).attr('cx'))
                            line.attr('y2', d3.select('#' + targetCircleId).attr('cy'))

                        }

                    });



                }))