D3中的长按事件

Question

是否可以在d3中的元素上实现长（延长）点击事件？ 我想不允许使用以下代码：

d3.selectAll("#mybutton").on("longClick",longClickFunction);

修改 我需要长按才能实现类似滑块的功能。 假设有一个DOM元素的html文本是1.点击#mybutton我想把它增加一个。通过长按#mybutton，我希望再将其增加一倍，直到我释放鼠标按钮。

Answer 1

d3.js中没有longClick事件，但您可以使用mousedown和mouse up事件来计算两者之间的时间长度。这实际上允许您测量点击持续时间。

下面的代码段在数据中定义了点击长度的阈值，因此每个rect元素将有不同的阈值来触发“长按”事件（分别为半秒和全秒）：

var svg = d3.select('body').append('svg').attr('width',500).attr('height',200);

var data = [{color:'orange', duration: 500} ,{color: 'steelblue', duration: 1000} ];

var startTime;
var endTime;

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('x',function(d,i) { return 20 + i * 40; })
   .attr('y',50)
   .attr('height',30)
   .attr('width',30)
   .attr('fill',function(d) { return d.color; })
   .on('mousedown', function() { startTime = new Date(); })
   .on('mouseup',function(d) { 
       endTime = new Date(); 
       if ((endTime - startTime) > d.duration) { 
           console.log("long click, " + (endTime - startTime) + " milliseconds long");
       }
       else {
           console.log("regular click, " + (endTime - startTime) + " milliseconds long");
       }
   });
   
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

修改

但是，如果您希望在期间（而不是之后）触发事件，例如递增，则可以使用mousedown和mouseup侦听器来记录类似的方法来记录长度。 '点击'：

var svg = d3.select('body').append('svg').attr('width',500).attr('height',200);

var data = [{color:'orange'} ,{color: 'steelblue'}];

var clicked;
var i;

svg.selectAll('rect')
   .data(data)
   .enter()
   .append('rect')
   .attr('x',function(d,i) { return 20 + i * 40; })
   .attr('y',20)
   .attr('height',30)
   .attr('width',30)
   .attr('fill',function(d) { return d.color; })
   .on('mousedown', function() { i=1; clicked = true; click(); })
   .on('mouseup',function() { clicked = false; })
   .on('mouseout',function() { clicked = false; });
  
function click() {
  if (clicked) {
    startTime = new Date();
    console.log("increment is: " + i);

    if (i < 6) { 
      setTimeout(function() { 
          click(++i) 
      }, 350);  // start slow
    }
    else if (i < 15) {
      setTimeout(function() { 
          click(++i) 
      }, 150);  // speed up
    }
    else {
      setTimeout(function() { 
          click(++i) 
      }, 25);  // go fast
    }
    
    
  }
  
  

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

对于这个片段，我添加了一个mouseout监听器来说明点击时漂移的老鼠 - 否则鼠标不会触发。