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]）<>

使用给定名称返回给定选择的新过渡。如果未指定名称，则使用null。

然后，因为它们都具有相同的名称（null），所以最后一个会取消第一个：

开始过渡还取消了在开始过渡之前在同一元素上创建的任何同名暂挂过渡。

因此，要将多个过渡应用于同一个元素，必须将其命名为：

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>

同样，请记住，我只是在这里回答您的问题：我的建议是您应该完全重构该过渡代码。

试图让两个圈子同时过渡

1 个答案: