javascript - 试图让两个圆圈同时过渡

Question

试图让两个圆圈(一红一蓝)从相反的方向移动到屏幕中心。只能让第二个圈子去做 - 不确定为什么。

我尝试了从切换函数调用顺序到切换变量名的所有方法

var svg = d3.select("body")
            .append("svg")
            .attr("width", 600)
            .attr("height", 200);


    var circles = svg.append('circle')
    .attr('cx',50).attr('cy',50).attr('r',10).style('fill','red');

    var circlesTwo = svg.append('circle')
    .attr('cx',50).attr('cy',50).attr('r',10).style('fill','blue');

    animation();
    animationTwo();

    function animation() {
    svg.transition()
        .duration(750)
        .tween("precision", function() {
          var area = d3.interpolateRound(0, 300);
          return function(t) {
            minArea = area(t);
            render();
          };
          
        })
    }

    function animationTwo() {
    svg.transition()
        .duration(750)
        .tween("precision", function() {
          var area = d3.interpolateRound(600, 300);
          return function(t) {
            minArea = area(t);
            renderTwo();
          };
          
        })
    }

    function render() {
  
    circles.attr('cx',minArea);

    }

    function renderTwo() {
  
    circlesTwo.attr('cx',minArea);


    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

预期结果是两个圆圈到达各自的位置(最初来自屏幕外)。实际结果是我只让我的蓝色圆圈起作用。

Answer 1

将过渡应用于 SVG 选择并不是一个非常惯用的 D3:您应该将它们应用于正在移动的元素(即圆圈)。顺便说一句，这就是您面临的问题的原因:一个转换正在取消另一个转换。

发生这种情况是因为您的转换没​​有名称，因此使用了 null ( link ):

selection.transition([name]) <>

Returns a new transition on the given selection with the specified name. If a name is not specified, null is used.

然后，因为它们都具有相同的名称(null)，所以最后一个取消了第一个:

The starting transition also cancels any pending transitions of the same name on the same element that were created before the starting transition.

因此，要对同一个元素应用多个过渡，您必须为它们命名:

function animation() {
    svg.transition("foo")
    //etc...
}

function animationTwo() {
    svg.transition("bar")
    //etc...
}

这里是你的代码有那个变化:

var svg = d3.select("body")
  .append("svg")
  .attr("width", 600)
  .attr("height", 300);

var circles = svg.append('circle')
  .attr('cx', 50).attr('cy', 50).attr('r', 10).style('fill', 'red');

var circlesTwo = svg.append('circle')
  .attr('cx', 50).attr('cy', 50).attr('r', 10).style('fill', 'blue');

animation();
animationTwo();

function animation() {
  svg.transition("foo")
    .duration(750)
    .tween("precision", function() {
      var area = d3.interpolateRound(0, 300);
      return function(t) {
        minArea = area(t);
        render();
      };

    })
}

function animationTwo() {
  svg.transition("bar")
    .duration(750)
    .tween("precision", function() {
      var area = d3.interpolateRound(600, 300);
      return function(t) {
        minArea = area(t);
        renderTwo();
      };

    })
}

function render() {

  circles.attr('cx', minArea);

}

function renderTwo() {

  circlesTwo.attr('cx', minArea);


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

再次提醒您，我只是在这里回答您的问题:我的建议是您应该完全重构该转换代码。