Javascript d3：当线路移动到特定位置时，调用函数_Javascript_D3.js

Javascript d3：当线路移动到特定位置时，调用函数

javascript d3.js

Javascript d3：当线路移动到特定位置时，调用函数,javascript,d3.js,Javascript,D3.js,我在水平方向上移动一条垂直线，我想实现这一点：当线路移动到特定位置时，例如x1=100，这将触发移动调用函数（x1）这可能吗这是我的水平转换代码： <html> <head> <script src="d3.min.js"></script> </head> <body> <div class="control-buttons"> <button class="pause">

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

当线路移动到特定位置时，例如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>


暂停
继续
d3.选择（'button.pause'）。打开（'click'，函数（）{
d3.选择（“行”）.中断（）；
});
d3.选择（'button.continue'）。在（'click'，function（）上{
d3.选择（“行”）.transition（）
.ease（d3.easeLinear）
.持续时间（10000）
.attr（“x1”，800）
.attr（“x2”，800）；
}).发送（“点击”）；

我想了一个方法，设置小的时间间隔，反复检查状态，但这种方法显然不好。应该有一种方法来定义在触发某个事件时要做什么，比如将“x1=100”定义为事件

不知道如何做或搜索。非常感谢您的帮助。

我想您可以使用

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);
      }
    });