Question

我有一个填充圆形进度条的过渡。在某些情况下，我也希望进度条也旋转，但是在进度条的填充部分完成之前，我不希望它旋转。

我尝试了以下操作：

在过渡中添加delay
- 这似乎延迟了整个过渡
在定义旋转过渡之前调用transition
- 这将执行两个转换，但是是串行转换（第二个转换等待第一个转换完成）
在第一个事件发生时在元素上调用transition（我正在使用attrTween方法）
- 这会使第一个过渡立即停止在原处，然后执行第二个过渡。

示例（基于Ruben提供的示例）：

let svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const ellipse = g.append('ellipse')
  .attr('id', '9')
  .attr('cx', 250)
  .attr('cy', 250)
  .attr('rx', 25)
  .attr('ry', 25)
  .attr('fill', 'black');

ellipse
  .transition("rx")
  .duration(2000)
  .ease('cubic-in-out')
  .attr('rx', 250);

ellipse
  .transition("ry")
  .duration(1000)
  .ease('cubic-in-out')
  .attr('ry', 250);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.3/d3.min.js"></script>
<!DOCTYPE html>
<svg width="960" height="750"></svg>

Answer 1

以下内容适用于d3 v3.5.17。我看到对于v3.4.3，它不起作用。如果可能，我建议升级到v3.5.x

let svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const ellipse = g.append('ellipse')
  .attr('id', '9')
  .attr('cx', 250)
  .attr('cy', 250)
  .attr('rx', 25)
  .attr('ry', 25)
  .attr('fill', 'black');

ellipse
  .transition("rx")
  .duration(2000)
  .attr('rx', 250);

ellipse
  .transition("ry")
  .delay(1000)
  .duration(1000)
  .attr('ry', 250);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<svg width="960" height="750"></svg>

在进行另一个过渡时开始过渡

1 个答案: