D3のlong clickイベント

Question

d3の要素に対して長い（延長された）クリックイベントを実装することは可能ですか？ 私は、次のコードが許可されていないとします

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

編集。 スライダのようなものを実現するには、長いクリックが必要です。 htmlテキストが1のDOM要素があるとします。#mybuttonをクリックすると、1つ増やしたいと考えています。 #mybuttonを長時間クリックすると、マウスボタンを離すまで、1つ増やしたいと思います。

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>

を

編集

しかし、あなたは時にイベントをトリガーにしたい（とないの後）場合などINC限りクリック、 rementingは、同様のアプローチを「クリック」の長さを記録するためにマウスダウンとの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>

を、私は考慮してマウスアウトリスナーを追加しましたマウスがクリックされたときに漂ってしまいます。そうでなければ、マウスアップはトリガーしません。