我有这个jsfiddle：https://jsfiddle.net/6hdp2gkz/，其中有3个可拖动的圆。在第一次加载时，我正在控制台中打印原始X位置。我想拖动圆圈，当我按下"单击我"按钮时，可以将三个圆圈重置到它们的原始位置(即第一次加载页面时放置的位置(。我怎样才能做到这一点？
这是圆变量，它也得到圆的初始位置：
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)})
}
这是您更改后的代码：
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="600"></svg>
<button type="button" class="btn options-bar-btn" onclick="onResetGraphBtnClick()" tooltip="Reset Graph" placement="bottom">CLick me
</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
//create some circles at random points on the screen
//create 50 circles of radius 20
//specify centre points randomly through the map function
radius = 20;
var circle_data = d3.range(3).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
//add svg circles
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");
var drag_handler = d3.drag()
.on("drag", function(d) {
d3.select(this)
.attr("cx", d3.event.x)
.attr("cy", d3.event.y);
});
//apply the drag_handler to our circles
drag_handler(circles);
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)
})
}
function onResetGraphBtnClick() {
reset(svg);
console.log("CLICKED" + drag_handler);
}
</script>