Question

这就是我到目前为止所遇到的问题是，每次生成svg时，它们都不会叠加在一起形成动画的错觉，而是相互堆叠或相邻，有谁知道如何解决这一问题？还有谁知道如何让圆圈从容器的底部而不是顶部出现？提前致谢

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Animation</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style> 
    </style>
  </head>
  <body>
      </svg>
    <script>

  var height1 = 0;

    for (let height1 = 0; height1 < 20; height1 ++) {
    setTimeout(function timer(){
      console.log(height1)

      //make SVG container
      var svgContainer = d3.select("body").append("svg")
                                        .attr("width", 100)
                                        .attr("height", height1);
      //Draw circle 
      var circle = svgContainer.append("circle")
                              .attr("cx", 50)
                              .attr("cy", 50)
                              .attr("r", 50);
    }, height1*500)


    }

    </script>
  </body>
</html>

Answer 1

无论你想做什么（根本不清楚，主要是因为有很多选择来正确创建动画），你的代码的问题是你在每个循环都附加一个新的SVG。

而不是那样，只需将SVG附加一次并改变其高度：

var height1 = 0;
var svgContainer = d3.select("body").append("svg")
  .attr("width", 100);

for (let height1 = 0; height1 < 20; height1++) {
  setTimeout(function timer() {

    //make SVG container
    svgContainer.attr("height", height1);
    //Draw circle 
    var circle = svgContainer.append("circle")
      .attr("cx", 50)
      .attr("cy", 50)
      .attr("r", 50);
  }, height1 * 500)
}

<script src="https://d3js.org/d3.v4.min.js"></script>

另一方面，如果你真的想在每个循环中附加一个SVG并最终得到一堆SVG（无论出于何种原因，这不是我要判断的地方），那么你必须使用position: absolute：

  var height1 = 0;

  for (let height1 = 0; height1 < 20; height1++) {
    setTimeout(function timer() {

      //make SVG container
      var svgContainer = d3.select("body").append("svg")
        .attr("width", 100)
        .attr("height", height1);
      //Draw circle 
      var circle = svgContainer.append("circle")
        .attr("cx", 50)
        .attr("cy", 50)
        .attr("r", 50);
    }, height1 * 500)
  }

svg {
  position: absolute;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

要补充Gerardo Furtado的回复，请注意脚本中的这两个height1变量。我想你不打算有两个。

在脚本的顶部范围内使用var声明一个;另一个用let声明，并且是你的循环的本地。我坚持认为它们是两个不同的变量，我建议你删除你用var声明的变量。

如何使用javascript将svgs堆叠在一起从for循环生成？

2 个答案: