D3中的长按事件

Question

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

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

编辑。 我需要长按才能实现类似滑块的效果。假设有一个 DOM 元素，其 html 文本为 1。单击后，#mybutton我想将其增加 1。长按#mybutton我想再增加一个，直到我松开鼠标按钮。

Answer 1

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

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

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 侦听器来解决鼠标在单击时漂移的问题 - 否则 mouseup 不会触发。