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侦听器来记录“click”的长度：

 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监听器来说明点击时漂移的老鼠 - 否则鼠标不会触发。