Question

我在水平方向上移动一条垂直线，我想实现这个：

当线移动到特定位置时，例如，x1 = 100，这将触发一个运动调用函数（x1）

这可能吗？

这是我的水平转换代码：

<html>
<head>
  <script src="d3.min.js"></script>
</head>

<body>

  <div class="control-buttons">
    <button class="pause">
      Pause
    </button>
    <button class="continue">
      Continue
    </button>    
  </div>
  <svg width="1000" height="500">
    <line x1="100" y1="0" x2="100" y2="100" stroke="black"/>
  </svg>
</body>

<script>   
  d3.select('button.pause').on('click', function() {
    d3.select("line").interrupt();
  });

  d3.select('button.continue').on('click', function() {
  d3.select("line").transition()
    .ease(d3.easeLinear)
    .duration(10000)
    .attr("x1",800)
    .attr("x2",800);
  }).dispatch('click');
</script>
</html>

我考虑过一种方法，设置小的时间间隔并一遍又一遍地检查状态，但这种方法显然不好。应该有一种方法可以定义触发事物时要做什么，比如定义＆＃39; x1 = 100＆＃39;作为一个事件？

不知道该怎么做或搜索。任何帮助表示赞赏。

Answer 1

我认为你可以使用tween调用来插入过渡位置。在此示例中，控制台日志在转换时插入0到800之间的值。您可以使用它来设置您的行为 - 在这里我将线条的颜色更改为红色：

d3.select("line").transition()
    .ease(d3.easeLinear)
    .duration(10000)
    .attr("x1",800)
    .attr("x2",800)
    .tween('position', function() {
        var interpol = d3.interpolate(0,800);
      return function(t){
        var val = interpol(t);
        if(val > 100) { d3.select('line').style('stroke', 'red')}
        console.log(val);
      }
    });

https://jsfiddle.net/m8Lt93qc/

d3：当一条线移动到特定位置时调用函数

1 个答案: