如何移动图形的位置

Question

我正在保存两个不同数组中一些圆的x和y坐标的初始位置：xNodeValues和yNodeValues。我正在移动d3圆圈，当我按下更新按钮时，我想把圆圈放回原来的位置。我使用的方法是：

const xnodes=this.xNodeValues;
const ynodes=this.yNodeValues;
this.svg=d3.selectAll('circle')
.transition()
.duration(750)
.attr("cx", function(d:any, i: number) {
console.log("Initial X position is (from update method)"+xnodes[i]);
return(xnodes[i])
})
.attr("cy", function(d:any, i: number) {
console.log("Initial Y position is (from update method)"+ynodes[i]);
return(ynodes[i])})
}

但不知何故，这些圆圈并没有回到原来的位置。我哪里错了？

Answer 1

当你这样做时：

const xnodes=this.xNodeValues;
const ynodes=this.yNodeValues;

你复制的是价值参考，而不是价值本身，所以在你移动圆圈后；xnodes"；以及"；ynodes"；数值也将发生变化。

试着做其中一件事：

// Old way to copy array values
const xnodes= this.xNodeValues.slice();
const ynodes= this.yNodeValues.slice();
// ES6 way to copy array values (preferable if supported)
const xnodes= [...this.xNodeValues];
const ynodes= [...this.yNodeValues];

这样做，可以将原始值保留为"0"；xnodes"；以及"；ynodes"；即使在移动圆圈之后。

Answer 2

通过移动，我假设您正在拖动节点。您需要定义一个具有d3行为拖动的拖动变量，并向拖动变量的.on属性添加dragstart、dragged和dragsended功能。

dragstart函数的定义是简单的一行代码。

function dragstarted(d) {
d3.event.whatervertransition or propagation
d3.select(this).classed("drags", true);
}

对于函数draged((，更新节点的x&y到x&y的画布

function dragged(d) {
var dragval= d3.mouse(this.parentNode);
d.x = dragval[0];
d.y = dragval[1];
d3.select(this)
.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")" });
}

现在，在函数drageend中，您需要重新设置节点的x&y位置

function dragended(d) {
d3.select(this).classed("drags", false);
if (condition to reset) {
var x = initialValX
var y = initialValY
}
}