javascript - 如何添加条件转换？

Question

这个问题是关于 d3.js 的转换，例如矩形 x 属性的变化。

如果您希望更改立即发生，您可以设置 delay = duration = 0如在

svg.selectAll("rect")
   .transition()
   .delay(delay)
   .duration(duration)
   .attr("x", 0)

但这可能太昂贵了(假设转换比立即更改更消耗 CPU)。那么我怎样才能有条件地添加转换，表现得像

if (delay == 0 && duration == 0) {
    svg.selectAll("rect")
        .attr("x", 0)
} else {
    svg.selectAll("rect")
        .transition()
        .delay(delay)
        .duration(duration)
        .attr("x", 0)
}

但冗余更少，更紧凑，有点像 x = condition ? 0 : 1 ?

Answer 1

这是一个非常奇怪的情况，我想不出一个有用的用例。话虽如此，这里是众多可能的解决方案之一:扩展 D3 选择原型(prototype)。

在我的方法中，我们将扩展原型(prototype)以在 delay 的情况下返回完全相同的选择。和 duration为零，或者如果它们不为零，则返回基于当前选择的过渡选择:

d3.selection.prototype.conditionalTransition =
  function(cond1, cond2) {
    return cond1 && cond2 ? this.transition().duration(duration).delay(delay) : this;
  };

然后，您只需继续 attr() 的链方法:

d3.selectAll("rect")
  .conditionalTransition(delay, duration)
  .attr("x", 200);

最后要注意，正则选择和过渡选择有不同的同名方法，如 selection.on()和 transition.on() .

这是第一个演示。所有的矩形都在 x = 10 .选择变成了过渡选择:

d3.selection.prototype.conditionalTransition =
  function(cond1, cond2) {
    return cond1 && cond2 ? this.transition().duration(duration).delay(delay) : this;
  };

const rect = d3.selectAll("rect");

const delay = 100,
  duration = 1000;

rect.conditionalTransition(delay, duration)
  .attr("x", 200)

function transitioning(sel) {
  return sel.transition()
    .delay(delay)
    .duration(duration);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
 <rect x="10" y="10" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="40" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="70" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="100" width="50" height="20" fill="teal"></rect>
</svg>

这是相同的代码，两个 delay和 duration等于零。如您所见，矩形已经在最终位置，没有过渡:

d3.selection.prototype.conditionalTransition =
  function(cond1, cond2) {
    return cond1 && cond2 ? this.transition().duration(duration).delay(delay) : this;
  };

const rect = d3.selectAll("rect");

const delay = 0,
  duration = 0;

rect.conditionalTransition(delay, duration)
  .attr("x", 200)

function transitioning(sel) {
  return sel.transition()
    .delay(delay)
    .duration(duration);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
 <rect x="10" y="10" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="40" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="70" width="50" height="20" fill="teal"></rect>
 <rect x="10" y="100" width="50" height="20" fill="teal"></rect>
</svg>