Javascript 如何从自动功能更改此功能

我有一个甜甜圈图的函数，它每隔几秒钟做一次很酷的转换。我从一个硬件作业中获取了一些信息，并希望将我的想法应用到它中，作为我自己的一个功能。我非常希望它保持静止，而不是每隔几秒钟移动一次，我希望它在按下键盘左键或右键时移动。它是用带有d3的javascript编写的。我仍然喜欢我只想左右控制的动画，而不是时间

功能：

function transition(state) {
  var path = d3.selectAll(".arc > path")
      .data(state ? arcs(data0, data1) : arcs(data1, data0));

  // Wedges split into two rings.
  var t0 = path.transition()
      .duration(1000)
      .attrTween("d", tweenArc(function(d, i) {
        return {
          innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,
          outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius
        };
      }));

  // Wedges translate to be centered on their final position.
  var t1 = t0.transition()
      .attrTween("d", tweenArc(function(d, i) {
        var a0 = d.next.startAngle + d.next.endAngle,
            a1 = d.startAngle - d.endAngle;
        return {
          startAngle: (a0 + a1) / 2,
          endAngle: (a0 - a1) / 2
        };
      }));

  // Wedges then update their values, changing size.
  var t2 = t1.transition()
        .attrTween("d", tweenArc(function(d, i) {
          return {
            startAngle: d.next.startAngle,
            endAngle: d.next.endAngle
          };
        }));

  // Wedges reunite into a single ring.
  var t3 = t2.transition()
      .attrTween("d", tweenArc(function(d, i) {
        return {
          innerRadius: innerRadius,
          outerRadius: outerRadius
        };
      }));

  setTimeout(function() { transition(!state); }, 5000);
}

---

您需要添加事件侦听器来响应键事件，而不是

setTimeout

调用。你应该开始了。为了捕获键盘事件，您需要确保SVG能够获得键盘焦点，这意味着给它一个；您还需要。下面是我为使用d3和键盘事件而准备的一个示例：