如何将 d3 图形重置为其原始位置？答案

【问题标题】：How to reset d3 graph to its original place?如何将 d3 图形重置为其原始位置？
【发布时间】：2021-03-15 09:32:58
【问题描述】：

我有这个 jsfiddle：https://jsfiddle.net/6hdp2gkz/，其中有 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");

【问题讨论】：

标签： javascript d3.js graph

【解决方案1】：

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

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>

【讨论】：

但是reset方法中x和y的位置是如何得到初始位置而不是拖动位置的呢？
因为那是绑定数据，没有改变。
我在一个角度应用程序中使用这个方法，当我点击重置按钮时，圆圈没有回到原来的位置，这就是我问的原因:)
或者是否可以像在浏览器的刷新中一样创建行为？只是为了让圆圈回到原来的位置。你知道我怎样才能做到这一点吗？ @Gerardo Furtado
非常感谢您的解决方案！但是是否有任何其他解决方案，基于刷新行为重置位置，但仅限于圈子，而不是浏览器页面？还是基于我分享的代码