javascript - 如何创造条件缓解？

Question

我有一个 d3.selectAll().each() 函数，它为我的 svg 容器中的每个 path 设置动画。现在我希望第一条路径有一个 d3.easePolyIn 动画，而其余路径有一个 d3.easeLinear 动画。

但是，我的以下代码不起作用(根本没有动画发生):

d3.selectAll(".myPaths").each(function(d,i) {

    d3.select(this)
        .attr("stroke-dasharray", d3.select(this).node().getTotalLength() + " " +  d3.select(this).node().getTotalLength())
        .attr("stroke-dashoffset", d3.select(this).node().getTotalLength())
        .transition()
            .duration(d3.select(this).node().getTotalLength())
            .ease(function(d) {if (i == 0) {return d3.easePolyIn} else {return d3.easeLinear}})
            .attr("stroke-dashoffset", 0)
})

我怎样才能实现我的目标？

Answer 1

因为您已经从外部函数 (selection.each) 中获得了索引 i，所以只需在 ease 方法中直接使用它:

.ease(i ? d3.easeLinear : d3.easePolyIn)

在这里，对于 i 的所有真值(即除 0 之外的所有索引)，三元返回 d3.easeLinear，并且 d3.easePolyIn 为假值(第一个索引，0)。

这是一个演示:

const svg = d3.select("svg")
const circles = svg.selectAll(null)
  .data([1, 1])
  .enter()
  .append("circle")
  .attr("r", 15)
  .attr("cx", 15)
  .attr("cy", (_, i) => i ? 100 : 50)
  .each(function(_, i) {
    d3.select(this)
      .transition()
      .ease(i ? d3.easeLinear : d3.easePolyIn)
      .duration(1000)
      .attr("cx", 280)
  });

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

您尝试的问题是 transition.ease 需要一个函数本身。因此，当您只返回 d3.easeLinear 或 d3.easePolyIn 时，这是行不通的。要使用您的方法，您必须传递标准化时间，惯用名称 t:

.ease(function(t) {
    if (i == 0) {
        return d3.easePolyIn(t)
    } else {
        return d3.easeLinear(t)
    }
})

这是相应的演示:

const svg = d3.select("svg")
const circles = svg.selectAll(null)
  .data([1, 1])
  .enter()
  .append("circle")
  .attr("r", 15)
  .attr("cx", 15)
  .attr("cy", (_, i) => i ? 100 : 50)
  .each(function(_, i) {
    d3.select(this)
      .transition()
      .ease(function(t) {
        if (i == 0) {
          return d3.easePolyIn(t)
        } else {
          return d3.easeLinear(t)
        }
      })
      .duration(1000)
      .attr("cx", 280)
  });

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