Question

因此，我在d3中有一个点，该点保留在transition方法下。按下模拟时，它将转到某个位置，然后从该位置返回到原始位置。它处于连续循环中，因此它所做的就是将它移到同一位置。

我想做的是使其像现在一样连续工作，但是当它从A移到B时，它不应该从B移回到A，而应该再次从A移到B。基本上是A到B ，A到B连续。这是我正在使用的代码。

dot.transition()
        .duration(3000)
        .attr("cx", 500)
        .attr("cy", 80).on("start", function repeat() {
            d3.active(this)
                .attr("cx", 70)
                .attr("cy", 350)
              .transition()
                .attr("cx", 500)
                .attr("cy", 80) 
              .transition()
                .on("start", repeat);
          });

您能帮我吗？预先感谢。

Answer 1

使用on.("end")代替.on("start")进行简单重构：

const dot = d3.select("circle");

dot.transition()
  .duration(3000)
  .attr("cx", 250)
  .attr("cy", 100).on("end", function repeat() {
    d3.select(this)
      .attr("cx", 50)
      .attr("cy", 50)
      .transition()
      .duration(3000)
      .attr("cx", 250)
      .attr("cy", 100)
      .on("end", repeat)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <circle r="10" cx="50" cy="50"></circle>
</svg>

但是我认为，如果您使用selection.call（可以与different和arguments一起使用），这将更加优雅和清晰：

const dot = d3.select("circle");

dot.call(transition)

function transition(element) {
  element.attr("cx", 50)
    .attr("cy", 50)
    .transition()
    .duration(3000)
    .attr("cx", 250)
    .attr("cy", 100)
    .on("end", function() {
      transition(element)
    })
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <circle r="10" cx="50" cy="50"></circle>
</svg>

顺便说一句，由于D3过渡使用d3.easeCubic作为默认缓动，因此，如果使用线性缓动，则可以获得更好的效果（取决于您想要的效果）：

const dot = d3.select("circle");

dot.call(transition)

function transition(element) {
  element.attr("cx", 50)
    .attr("cy", 50)
    .transition()
    .duration(3000)
    .ease(d3.easeLinear)
    .attr("cx", 250)
    .attr("cy", 100)
    .on("end", function() {
      transition(element)
    })
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <circle r="10" cx="50" cy="50"></circle>
</svg>

如何在循环中从起始位置过渡？

1 个答案: