{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 冷血范 的问题《d3js transforming nested group images》','https://www.manongdao.com/q-1272260.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am working on [this][1] d3 project. Basically I am trying to create a SQL like query builder. I can drop boxes to the drawing area & other operators inside the box. Then I should be able to connect them all. I am trying to translate 2 images which are nested in groups. I want to move the small items inside the big box. I can transform the big box and small operators separately. Problem happens When I try to move the small operators first. I want to move the small operators, then big boxes. meanwhile I want to keep the relative position of small operators and big box same. But when I try to move the large box after moving one of the small box it resets its location. Here is a demo of my work in jsfiddle
<g id="draw">
<rect class="container" height="400" width="400" x="0" y="0" style="fill:gray"></rect>
<g class="qbox" id="qbox">
<line id="dummyLine" x1="0" x2="0" y1="0" y2="0" visibility="hidden"
style='stroke:red; stroke-width:4px'></line>
<image x="10" y="10" class="container" initial-x="10" initial-y="10" xlink:href="http://i60.tinypic.com/20ic9e.png"
width="110"
height="110"></image>
<circle class="left" id="qbox-left" initial-cx="10" initial-cy="65" cx="10" cy="65" r="5"
style="fill:red"></circle>
<circle class="right" id="qbox-right" initial-cx="120" initial-cy="65" cx="120" cy="65" r="5"
style="fill:red"></circle>
<g id="op1" class="op">
<image class="opim" x="10" y="10" class="container" initial-x="10" initial-y="10"
xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
height="50"></image>
<circle id="op1-left" class="left" initial-cx="10" initial-cy="35" cx="10" cy="35" r="5"
style="fill:red"></circle>
<circle id="op1-right" class="right" initial-cx="60" initial-cy="35" cx="60" cy="35" r="5"
style="fill:red"></circle>
</g>
<g id="op2" class="op">
<image class="opim" x="60" y="60" initial-x="60" initial-y="60"
xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
height="50"></image>
<circle id="op2-left" class="left" initial-cx="60" initial-cy="85" cx="60" cy="85" r="5"
style="fill:red"></circle>
<circle id="op2-right" class="right" initial-cx="110" initial-cy="85" cx="110" cy="85" r="5"
style="fill:red"></circle>
</g>
</g>
<g class="qbox" id="qbox2" >
<line id="dummyLine" x1="0" x2="0" y1="0" y2="0" visibility="hidden"
style='stroke:red; stroke-width:4px'></line>
<image x="110" y="110" class="container" initial-x="110" initial-y="110" xlink:href="http://i60.tinypic.com/20ic9e.png"
width="110"
height="110"></image>
<circle class="left" id="qbox-left" initial-cx="110" initial-cy="165" cx="110" cy="165" r="5"
style="fill:red"></circle>
<circle class="right" id="qbox-right" initial-cx="220" initial-cy="265" cx="220" cy="165" r="5"
style="fill:red"></circle>
<g id="op3" class="op">
<image class="opim" x="110" y="110" class="container" initial-x="110" initial-y="110"
xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
height="50"></image>
<circle id="op1-left" class="left" initial-cx="110" initial-cy="135" cx="110" cy="135" r="5"
style="fill:red"></circle>
<circle id="op1-right" class="right" initial-cx="160" initial-cy="135" cx="160" cy="135" r="5"
style="fill:red"></circle>
</g>
<g id="op4" class="op">
<image class="opim" x="160" y="160" initial-x="160" initial-y="160"
xlink:href="http://i58.tinypic.com/imlzs9.png" width="50"
height="50"></image>
<circle id="op2-left" class="left" initial-cx="160" initial-cy="185" cx="160" cy="185" r="5"
style="fill:red"></circle>
<circle id="op2-right" class="right" initial-cx="210" initial-cy="185" cx="210" cy="185" r="5"
style="fill:red"></circle>
</g>
</g>
</g>
var qBox = d3.selectAll('.qbox')
.on('dblclick', function () {
var g = d3.select(this);
var scale = 'scale(1.2,1.2)';
g.attr('transform', g.attr('transform') + ' ' + scale);
});
var opBox = d3.selectAll('.op');
var circles = d3.selectAll('circle');
var cDrag = d3.behavior.drag()
.on('dragstart', function () {
d3.event.sourceEvent.stopPropagation();
})
.on('drag', function () {
var dummyLine = d3.select('#dummyLine');
var me = d3.select(this);
var transForm = me.node().getCTM();
var t2 = me.select(function () {
return this.parentNode;
}).select(function () {
return this.parentNode;
}).select('circle').node().getCTM();
var tC = d3.transform(d3.select(this).attr('transform')).translate;
var tP = d3.transform(d3.select(this).select(function () {
return this.parentNode;
}).attr('transform')).translate;
console.log(transForm);
var meX = t2['e'];
var meY = t2['f'];
dummyLine
.style('visibility', 'visible')
.attr('tx1', Number(me.attr('cx')))
.attr('x1', Number(me.attr('cx')) + (Number(transForm['e'] - Number(meX))))
.attr('ty1', Number(me.attr('cy')))
.attr('y1', Number(me.attr('cy')) + (Number(transForm['f'] - Number(meY))))
.attr('x2', Number(d3.event.x) )
.attr('tx2', Number(d3.event.x) + Number(tP[0]) - Number(tC[0]))
.attr('y2', Number(d3.event.y) )
.attr('ty2', Number(d3.event.y) + Number(tP[1]) - Number(tC[0]))
.attr('start', me.attr('id'))
;
})
.on('dragend', function () {
var g = d3.select(this).select(function () {
return this.parentNode;
}).select(function () {
return this.parentNode;
});
var dummyLine = d3.select('#dummyLine');
dummyLine.style('visibility', 'hidden');
d3.select('.qbox')
.append('line')
.attr('id', function () {
return dummyLine.attr('start') + '__' + circleID;
})
.attr('x1', dummyLine.attr('x1'))
.attr('ix1', dummyLine.attr('tx1'))
.attr('x2', dummyLine.attr('x2'))
.attr('ix2', d3.select('#' + circleID).attr('cx'))
.attr('y1', dummyLine.attr('y1'))
.attr('iy1', dummyLine.attr('ty1'))
.attr('y2', dummyLine.attr('y2'))
.attr('iy2', d3.select('#' + circleID).attr('cy'))
.attr('start', dummyLine.attr('start'))
.attr('end', circleID)
.style('stroke', 'green')
.style('stroke-width', '2px')
;
})
;
var svg = d3.select('svg').node();
var drag = d3.behavior.drag()
.origin(function () {
var t = d3.transform(d3.select(this).attr("transform")).translate;
return {x: t[0], y: t[1]};
}).on('dragstart', function () {
d3.event.sourceEvent.stopPropagation();
}).on('drag', function () {
var g = d3.select(this);
var mouse = {dx: d3.event.x, dy: d3.event.y};
var currentObj = {
x: g.select('image').attr('x'),
y: g.select('image').attr('y'),
width: g.select('image').attr('width'),
height: g.select('image').attr('height')
};
var parentObj = {
x: (Number(g.select(function () {
return this.parentNode;
}).select('.container').attr('x'))), // + Number(d3.transform(parent.attr('transform')).translate[0])),
y: (Number(g.select(function () {
return this.parentNode;
}).select('.container').attr('y'))), // + Number(d3.transform(parent.attr('transform')).translate[1])),
width: g.select(function () {
return this.parentNode;
}).select('.container').attr('width'),
height: g.select(function () {
return this.parentNode;
}).select('.container').attr('height')
};
var loc = getXY(mouse, currentObj, parentObj);
d3.select(this).attr('transform', 'translate(' + loc.x + ',' + loc.y + ')');
// d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
var groupId = d3.select(this).attr('id');
var groupClass = d3.select(this).attr('class');
d3.selectAll('line')[0].forEach(function (e1) {
var line = d3.select(e1);
// console.log('groupId: ', groupId);
if (line.attr('id') != 'dummyLine' && groupClass != 'qbox') {
// console.log('--------------');
// console.log('lineId: ', line.attr('id'));
var lineStart = line.attr('start').split('-')[0];
var lineEnd = line.attr('end').split('-')[0];
// console.log('lineStatr : ', lineStart);
// console.log('lineEnd : ', lineEnd);
var t = d3.transform(d3.select('#' + groupId).attr('transform')).translate;
var t2 = d3.transform(d3.select('#' + groupId).select(function () {
return this.parentNode;
}).attr('transform')).translate;
console.log('groupID ', groupId);
if (lineStart == groupId) {
var t = d3.transform(d3.select('#' + lineStart).attr('transform')).translate;
line.attr('x1', Number(line.attr('ix1')) + (Number(t[0])));
line.attr('y1', Number(line.attr('iy1')) + Number(t[1]));
// line.attr('x1', Number(line.attr('ix1')) - (-Number(t[0])+Number(t2[0])));
// line.attr('y1', Number(line.attr('iy1')) - (-Number(t[1]+Number(t2[1]))));
}
if (lineEnd == groupId) {
var t = d3.transform(d3.select('#' + lineEnd).attr('transform')).translate;
line.attr('x2', Number(line.attr('ix2')) + Number(t[0]));
line.attr('y2', Number(line.attr('iy2')) + Number(t[1]));
// line.attr('x2', Number(line.attr('ix2')) - Number(t[0]));
// line.attr('y2', Number(line.attr('iy2')) - Number(t[1]));
// line.attr('x2', Number(line.attr('ix2')) - (Number(t[0]+Number(t2[0]))));
// line.attr('y2', Number(line.attr('iy2')) - (Number(t[1]+Number(t2[1]))));
}
}
});
})
;
opBox.call(drag);
qBox.call(drag);
circles.call(cDrag);
var circleID;
circles.on('mouseover', function () {
circleID = d3.select(this).attr('id');
}).on('mouseout', function () {
circleID = null;
})
PS : I connect two elements by dragging the circles and dropping into another circle.
Can anyone point out my mistake?
From my experience developing visual editors, I can say that relative positions (such as x,y in Operator) can and shoud be managed as data.
Try changing that data (and not directly the x,y attributes of the svg element), and binding the data in a d3js way. It will be much more idiomatic and fast.
PS: I know about separation of model and view, and I know about the bad side of storing visual properties along the model, but if it will be only a view for that model, it is for sure the best approach.
After all sort of troubles, I found my answer. Actually it is all about the coordinate system and where to put stuff and how to organize it. Once I fugured that out, Answer is pretty obvious.