Javascript 如何将d3图形重置到其原始位置？

我有一个JSFIDLE:，其中有3个可拖动的圆。在第一次加载时，我正在控制台中打印原始的X位置。我想拖动圆圈，当我按下“单击我”按钮时，可以将三个圆圈重置为其原始位置（即第一次加载页面时放置的位置）。 我怎样才能做到这一点

这是circle变量，它还获取圆的初始位置：

var circles = d3.select("svg")
    .append("g")
    .attr("class", "circles")
    .selectAll("circle")
        .data(circle_data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {console.log("Initial X position is "+d.x);return(d.x)})
        .attr("cy", function(d) {return(d.y)})
        .attr("r", radius)
        .attr("fill", "orange"); 

function reset(source) {
  svg.selectAll("circle")
    .transition()
    .duration(750)
    .attr("cx", function(d) {console.log("Initial X position is "+d.x);return(d.x)})
        .attr("cy", function(d) {return(d.y)})
}

---

这里有几种方法，最简单的方法是将基准更改放在拖动处理程序内，并使用绑定数据重新定位圆：

var circles = d3.select("svg")
    .append("g")
    .attr("class", "circles")
    .selectAll("circle")
        .data(circle_data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {console.log("Initial X position is "+d.x);return(d.x)})
        .attr("cy", function(d) {return(d.y)})
        .attr("r", radius)
        .attr("fill", "orange"); 

function reset(source) {
  svg.selectAll("circle")
    .transition()
    .duration(750)
    .attr("cx", function(d) {console.log("Initial X position is "+d.x);return(d.x)})
        .attr("cy", function(d) {return(d.y)})
}

以下是更改后的代码：

点击我
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
//在屏幕上的任意点创建一些圆
//创建50个半径为20的圆
//通过贴图功能随机指定中心点
半径=20；
var circle_data=d3.range（3.map）（函数（）{
返回{
x:Math.round（Math.random（）*（宽度-半径*2）+半径），
y:Math.round（Math.random（）*（高度-半径*2）+半径）
};
});
//添加svg圆圈
变量圆=d3。选择（“svg”）
.附加（“g”）
.attr（“类”、“圆”）
.selectAll（“圆圈”）
.数据（圈_数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
控制台日志（“初始X位置为”+d.X）；
返回（d.x）
})
.attr（“cy”，函数（d）{
返回（d.y）
})
.attr（“r”，半径）
.attr（“填充”、“橙色”）；
var drag_handler=d3.drag（）
.开启（“拖动”，功能（d）{
d3.选择（本）
.attr（“cx”，d3.event.x）
.attr（“cy”，d3.event.y）；
});
//将drag_处理程序应用于我们的圆
拖拽处理器（圆圈）；
功能重置（源）{
svg.selectAll（“圆圈”）
.transition（）
.持续时间（750）
.attr（“cx”，功能（d）{
控制台日志（“初始X位置为”+d.X）；
返回（d.x）
})
.attr（“cy”，函数（d）{
返回（d.y）
})
}
函数onResetGraphBtnClick（）{
复位（svg）；
log（“单击”+拖动处理程序）；
}

但是重置方法中x和y的位置是如何得到初始位置而不是拖动位置的？因为这是绑定的基准，没有更改。我在角度应用程序中使用此方法，当我单击重置按钮时，圆不会被带到其原始位置，这就是为什么我要问：）或者是否可以在刷新浏览器时创建行为？只是为了让圆圈回到原来的位置。你知道我怎样才能做到这一点吗@Gerardo Furtado非常感谢您的解决方案！但是，是否有其他解决方案，根据刷新行为重置位置，但仅针对圆圈，而不是浏览器页面？仍然基于我共享的代码