D3中的长单击事件

Question

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

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

编辑。 我需要长时间点击以获得像滑块一样的东西。 假设有一个DOM元素，其html文本是1.点击#mybutton我想增加一个。长按一下#mybutton，我想快速增加一个，直到释放鼠标按钮。

Answer 1

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

的片断下面具有用于在数据定义的点击长度的阈值，所以每个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>

编辑

但是，如果你想要的（后并没有）来触发事件中的长按，如INC rementing，类似的方法可以用鼠标按下和鼠标松开监听记录的“点击”的长度应采取：

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>

对于这个片段中，我添加了一个鼠标移出听众占点击时鼠标漂移 - 否则mouseup不会触发。