d3js在转换组内移动SVG元素 [英] d3js Moving SVG elements inside a transforming group
本文介绍了d3js在转换组内移动SVG元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理查询构建器项目。我试图使用d3.js构建一个查询生成器。我陷入了一个部分，我想移动某个元素在一个转换组。这是
连接完成后，我尝试哟移动大盒&小运营商。这就是代码断裂的地方。
解决方案
主要的问题是移动操作符，使用translate来移动整个组图像，两个圆和线。然后使用CX，CY连接的其他操作员的CY值设置线的另一端。
这不会工作，因为当您执行翻译时，圈子的CX和CY值不更新，所以在第二个移动，它会把x，y值在圆的原点，而不是移动点。
要解决，而不是翻译整个组，只翻译图像，更新圆圈的cx和cy值，然后更新线x，y值与新的cx，cy的圈子：
所有需要的修改都在您的operatorDrag.js文件中。
首先，当追加圆圈时，添加一个保存原始cx和cy值的属性。在计算新的cx，cy拖曳运算符时，我们需要这些：
更改为：
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 [0]）
.attr（'y'，d3.mouse（this）[1]）$ b $ b .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）
;
此更新代码包含在以#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]）$ b $ b .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： cx和cy位置。
//移动运算符时需要它设置新的cx cy
.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：添加对原始cx和cy位置的引用。
//移动运算符时需要它设置新的cx cy
.attr（'data-cx'，Number（op.attr（'x'））+ Number .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）
;
一旦你这样做，去操作员的拖动方法。这是我们将要更改的代码：
.on（'drag'，function（）{
var g = d3.select（this）;
var currentOp = g.select（'。operator'）;
var parent = g.select（function b $ b 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 ）
};
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'））;
}
}）
}））
第一件事是，不翻译整个对象，只翻译图片：
var g = d3.select（this）;
var currentOp = g.select（'。operator'）;
var parent = g.select（function（）{
return this.parentNode;
}）。select（'。qbox'）;
//＃SB：添加对父标识的引用
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：不翻译所有内容，圈子的cx，cy值不更新
//翻译时会使未来移动计算不正确
g.selectAll（'image'）。attr（'transform'，'translate（'+ loc.x +'，'+ loc.y +'）'）;
然后，而不是平移圆形，使用原始cx，cy更改其cx和cy值并翻译值：
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）;
}
最后一件事是更新行。在原始代码中，您选择了运算符组中的所有行，但是实际上只会通过选择此组来忽略某些行。一些线可以是另一个操作员组的一部分，但是连接到正在移动的操作员。
在这种情况下，我们应该选择父组中的所有行，并检查行是否连接到我们正在移动的操作符。
如果已连接，则更新x和y值：
//＃SB：选择所有行在父组中，而不是只有
//操作符的组，我们正在移动。可能有其他组上存在的行，
//不存在于正在移动的组中。
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 tell我们如果线连接到左或右节点
var operators = line.attr（'class'）。split（）; //类保存有关线连接到什么操作符的信息
var sourceCircleId = nodeType [0] .split（ - ）[0] +' - '+ operators [1];
var targetCircleId = nodeType [ 0] +' - '+ operators [2];
if（parent_id == operators [1] || parent_id == operators [2]）{//该行连接到操作符我们在移动
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'））
}
}
完成OnDrag代码：
.on（'drag'，function（）{
var g = d3.select（this）;
var currentOp = g.select （'.operator'）;
var parent = g.select（function（）{
return this.parentNode;
}）。
//＃SB：添加对父标识的引用
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：不翻译所有内容，圈子的cx，cy值不更新
//翻译时会使未来移动计算不正确
g.selectAll（'image'）。attr（'transform'，'translate（'+ loc.x +'，'+ loc.y +'）'）;
g.selectAll（'circle'）
.attr（'cx'，function（）{
return parseFloat（d3.select （'data-cx'））+ parseFloat（loc.x）;
}）
.attr（'cy'，function（）{
return parseFloat（d3。 select（this）.attr（'data-cy'））+ parseFloat（loc.y）;
}）;
//＃SB：选择父组中的所有行，而不是我们正在移动的
//操作符的组。可能有其他组上存在的行，
//不存在于正在移动的组中。
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 tell我们如果线连接到左或右节点
var operators = line.attr（'class'）。split（）; //类保存有关线连接到什么操作符的信息
var sourceCircleId = nodeType [0] .split（ - ）[0] +' - '+ operators [1];
var targetCircleId = nodeType [ 0] +' - '+ operators [2];
if（parent_id == operators [1] || parent_id == operators [2]）{//该行连接到操作符我们正在移动
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'））
}
}
}））
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 transforming group. This is the repo and I am stucked in this function. I want to move the operators after connecting it and update the connected lines. Can anyone help me?
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;
});
EDIT : When I try to drop a query Box. I can drop other operators inside it. Then I should be able to connect them inside. Here is the image showing what I am trying.
After the connections made, I try yo move large box & small operators individually. That's where the code break.
解决方案
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'))
}
});
}))
这篇关于d3js在转换组内移动SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
